Using jQuery, I am manipulating the display of an <a> element. Depending on certain keypress events, it adds or removes a class from an <input> element (which controls the display) that is related as a sibling to the mentioned <a>.
The issue arises when using a selector in CSS that involves the use of +. Specifically, in Chrome (I have not verified other browsers), the <a> element does not show up with display:block when its sibling <a> has the specified class.
HTML
<div class="cont">
<input class="myInput"/>
<label>S</label>
<a>X</a>
</div>
CSS
.cont {
position: relative;
}
a {
position: absolute;
left: 117px;
top: 3px;
display: none;
}
label {
position: absolute;
left: 140px;
top: 3px;
}
.has_typed + label + a {
display: block;
}
Script
$("input").on('keyup', function(){
var thiss = $(this);
if (thiss.val() != 0 && !(thiss.hasClass('has_typed'))) {
thiss.addClass('has_typed');
}
else if (thiss.val() == 0) {
thiss.removeClass('has_typed');
}
});
Check out the live demo here: http://jsfiddle.net/aF4qt/1/