Hovering issue with Jquery

Question

Say I have 3 div elements with one class, hovering one of them I want the background of the inner element to change to a red. I tryed to add an ID for each element like this:

<div class="content"><div class="yellow_hover"></div></div>
<div class="content"><div class="yellow_hover"></div></div>
<div class="content"><div class="yellow_hover"></div></div>

Jquery

$('.content').each(function(i, div) {
div.id="div" + (i+1);
});

Result

<div class="content" id="div1"></div>
<div class="content" id="div2"></div>
<div class="content" id="div3"></div>

Now I need something like this, yeah I know... I'm lost:

$(div+i).hover(function() {
   $('.yellow_hover').css('background-color','#FF9900');
});

Is that really the result? Dies the .yellow_hover DIV disappear? — Joel Peltonen, Oct 17 '14 at 09:26

Patsy Issa · Answer 1 · 2014-10-17T09:33:00.253

3

You don't need js for this, in your css set the following rule:

.content:hover .yellow_hover {
  background-color: #FF9900;
}

JsFiddle

edited Oct 17 '14 at 09:33

answered Oct 17 '14 at 09:26

Patsy Issa

11,113
4
55
74

This CSS will change the background color of both divs. Inside the content div is a little area (yellow_hover div). Hovering the bigger div must change the color of the yellow_hover. – Renzo CJ Oct 17 '14 at 09:31
You are right, sorry I saw ".content: hover .yellow: hover", to many hours working ... – Renzo CJ Oct 17 '14 at 09:39

score 1 · Answer 2 · answered Oct 17 '14 at 09:27

1

You need not to add id to the div, remove that code. try below code for hovering

$('.content').hover(function() {
   $(this).find('.yellow_hover').css('background-color','#FF9900');
}, function(){
   $(this).find('.yellow_hover').css('background-color','#FFFFFF');
});

DEMO

answered Oct 17 '14 at 09:27

Bhushan Kawadkar

28,279
5
35
57

Wouldn't you prefer doing this via css? – Patsy Issa Oct 17 '14 at 09:29
So easy ? just like that. Thanks – Renzo CJ Oct 17 '14 at 09:32
yes, it is easy.. first function of hover on and second for hover off – Bhushan Kawadkar Oct 17 '14 at 09:34
@PatsyIssa, yeah CSS3 is also one of the option for manipulating DOM or animation. – Bhushan Kawadkar Oct 17 '14 at 09:35

score 1 · Answer 3 · answered Oct 17 '14 at 09:30

Give the element a class like "yellow_box"

Jquery

$(".yellow_box").hover(
  function() {
    $( this ).addClass( "yellow_hover" );
  }, function() {
   $( this ).removeClass( "yellow_hover" );
 }
);

When we hover a div, we add a class (yellow_hover)

See jquery documentation for more information http://api.jquery.com/hover/

score 0 · Answer 4 · answered Oct 17 '14 at 09:29

0

In JS you need to done like that :

$('body').on('hover','[id^="div"]',function() {
   $('[id^="div"]').removeAttr( "background-color" );
   $(this).css('background-color','#FF9900');
});

answered Oct 17 '14 at 09:29

Ankit Tyagi

2,381
10
19

Hovering issue with Jquery

4 Answers4