Question

我想将背景颜色更改为悬停6个不同的div，并附加相同的类。当鼠标进出时，如何更改每个div上的背景颜色？

这是我的HTML：

<div class="col-xs-12 col-md-5 col-md-offset-1">
    <div class="thumbnail">
        <img src="" class="img-responsive" alt="" />
   </div>
   <a href="#"><p id="caption">Thumbnail</p></a>
   <p id="date">Feburary 02, 2014</p>
</div>

（其中有六个。）

这是我的jQuery：

$(document).ready(function(){
     $('.thumbnail').mouseover(function(){
    $('.thumbnail').css("background-color","#a84444")
});

$('.thumbnail').mouseout(function(){
    $('.thumbnail').css('background-color', '#EC5657')
});
});

任何人都可以帮助我吗？

网页是：http://ljferris.com/portfolio_index/

Answer 1

您需要使用this。这里引用了调用事件的元素

使用

$(document).ready(function () {
    $('.thumbnail').mouseover(function () {
        $(this).css("background-color", "#a84444")
    });
    $('.thumbnail').mouseout(function () {
        $(this).css('background-color', '#EC5657')
    });
});

OR

您可以简单地使用.hover()，简写为：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

代码

$(document).ready(function () {
    $('.thumbnail').hover(function () {
        $(this).css("background-color", "#a84444")
    }, function () {
        $(this).css('background-color', '#EC5657')
    });
});

Answer 2

更好的方法是使用另一个类'div-one-bg''div-two-bg'等等......

.div-one-bg:hover {
  background-color: #A84444 !important;
}
.div-one-bg {
  background-color: #EC5657;
}

.div-two-bg:hover {
    background-color: #AAFFCC !important;
}
.div-two-bg {
    background-color: #EE2277;
}

然后你可以把这个类应用到像

这样的div

<div class="col-xs-12 col-md-5 col-md-offset-1">
    <div class="thumbnail div-one-bg">
        <img src="" class="img-responsive" alt="" />
   </div>
   <a href="#"><p id="caption">Thumbnail</p></a>
   <p id="date">Feburary 02, 2014</p>
</div>

<div class="col-xs-12 col-md-5 col-md-offset-1">
    <div class="thumbnail div-two-bg">
        <img src="" class="img-responsive" alt="" />
   </div>
   <a href="#"><p id="caption">Thumbnail</p></a>
   <p id="date">Feburary 02, 2014</p>
</div>

选中此link

jQuery让类一次改变一个背景

2 个答案: