How to set a hover style element?

Question

Here is the document:

<div class="rate_num">...</div> <div class="rate">...</div>

How to make the rate_num class have a border when you hover on a rate class?

Made such type:

 .rate a:hover .rate_num { border: 1px solid #ADBCCB; }

or

 .rate a:hover ~ .rate_num { border: 1px solid #ADBCCB; }

But both options do not work.

omgwtf omgwtf 381 1 silver mark 11 bronze marks · Accepted Answer · 2012-05-26T19:53:21

: hover Will only work if the element that will have a border appears inside the element you are pointing at.

If you use pure css, then you need to redo the markup like this:

 <div class="rate"> <div class="rate_num">...</div> ... </div>

then the recording will work

 .rate:hover .rate_num { border: 1px solid #ADBCCB; }

If the project uses jQuery to do so http://jsfiddle.net/Vafqr/

 $('.rate').hover( function(){ $('.rate_num').css("border", "1px solid #ADBCCB" ); }, function(){ $('.rate_num').css("border", "none" ); } );

1 answer 1