Question

假设我有一个带有一个类的3个div元素，将其中一个悬停在其中我希望内部元素的背景变为红色。我试着为每个元素添加一个ID：

<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);
});

结果

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

现在我需要这样的东西，是的，我知道......我迷路了：

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

Answer 1

你不需要js，在你的css中设置以下规则：

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

JsFiddle

Answer 2

您无需向div添加id，删除该代码。尝试下面的代码悬停

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

<强> DEMO

Answer 3

为元素添加类似“yellow_box”

的类

Jquery

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

当我们悬停div时，我们添加一个类（yellow_hover）

有关更多信息，请参阅jquery文档 http://api.jquery.com/hover/

Answer 4

在JS中你需要这样做：

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

Jquery的悬停问题

4 个答案: