Zubzob
Zubzob

Reputation: 2743

Strange CSS displaying issue

I'm managing a <a>'s element display with jquery. Based on some keypress events, it appends or removes an <input>'s class (responsible with display management) that has a sibling relationship with the mentioned <a>.

The problem is that, i have a selector that uses CSS +. And for some reason, in Chrome (im not sure about other browsers since i have not tested), it won't display:block the <a> element when the sibling <a> has the 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');
    }
});

Fiddle here: http://jsfiddle.net/aF4qt/1/

Upvotes: 4

Views: 150

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

If you are doing every thing in jQuery then why not do the rest using jQuery itself.

Try this:

$('.has_typed + label + a').show();

Not sure though why the same was not working in css

Working Fiddle

This will also work if you have multiple groups.

Check this fiddle

Check this link for more info.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

Change:

.has_typed + label + a { ... }

To:

.has_typed ~ label + a { ... }

http://jsfiddle.net/JamesD/aF4qt/7/

Upvotes: 4

Related Questions