CODEWITHSUNDEEP
htmlcss
qadenza
qadenza

Reputation: 9293

css hover to change non-hovering div

<div class='checked' id='rb01'></div>
<div class='rb' id='rb02'></div>
<div class='rb' id='rb03'></div>
<div class='rb' id='rb04'></div>

css

.rb{
    display:inline-block;
    width:12px;
    height:12px;
    background-color:#ffffff;
    border-radius:50%;
    margin:0 5px;
    cursor:pointer;
}
.rb:hover {
    background-color:#B30000;
    border:2px solid #ffffff;
}
.checked{
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    margin:0 5px;
    cursor:pointer;
    background-color:#B30000;
    border:2px solid #ffffff;
}

So hovering a .rb div it becomes red and it works.
But, how can I make that, when hovering a .rb div, any div which is .checked - becomes non-red, i.e. - .rb ?

Upvotes: 0

Views: 110

Answers (3)

Alfred
Alfred

Reputation: 21386

Using jquery, you may try something like;

$( ".rb" ).mouseover(function() {
    $(".checked").css('background-color', 'blue');
}).mouseout(function() {
    $(".checked").css('background-color', 'red');
});

Here is a working demo.

Upvotes: 2

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

you can give css like this

.rb:not(.checked):hover { do css here}

Upvotes: 0

versvs
versvs

Reputation: 643

As the .rb and the .checked containers are not nested nor related, what you are looking for is probably some javascript solution.

jQuery provides a .hover() method that you can use to achieve your goal with just a few lines (say, on hover for .rb element you can add an extra CSS class for the .checked div, and provided you define non-red styles for this .checked.new-class in your css, you'll have it made :)

Upvotes: 2

Related Questions