使用jQuery添加类时不显示效果

我有一个HTML，如下所示：

<div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="span7">
          <div class="home-image left-image">
            <img class="photography-left-top" src="http://placehold.it/700x440" />
            <p class="image-text_left">Wedditng Photography</p>
          </div>

          <h5>Heading</h5>
        </div>
        <div class="span5">
            <div class="home-image right-image right-image-top">
                <img class="photography-right-top" src="http://placehold.it/400x200" />
                <p class="image-text_right-top">Fashion Photography</p>
          </div>
          <div class="home-image right-image right-image-bottom">
            <img class="photography-right-bottom" src="http://placehold.it/400x200" />
            <p class="image-text_right-bottom">Contact</p>
          </div>

          <h5>Heading</h5>
       </div>

      </div>

 </div>        

JS:

由于

addClass（'home-img-hover'）

将把a类添加到当前

类中，所以当我将鼠标悬停在
左侧图像上时，我希望有一个背景色。但它显示白色默认背景。为什么?

它完全符合您的期望，您只是看不到它，因为
.home image
没有高度，因为它里面的所有内容都从正常文档流中取出（使用
位置：绝对
）。试着给
.home image
一些维度，你就会明白我的意思：

.home-image {
    position:relative;
    width:400px;
    height:240px;
}

它完全符合您的期望，您只是看不到它，因为
.home image
没有高度，因为它里面的所有内容都从正常文档流中取出（使用
位置：绝对
）。试着给
.home image
一些维度，你就会明白我的意思：

.home-image {
    position:relative;
    width:400px;
    height:240px;
}

这是你的问题，你的div的高度实际上是
0px

加上

height: 240px;
width: 400px;

转到
.home image
类，您将看到您的代码实际工作正常

请参见
这是您的问题，您的div的高度实际上是
0px

加上

height: 240px;
width: 400px;

转到
.home image
类，您将看到您的代码实际工作正常

请参见
。因为您使用了.fadeTo（'slow'，0），所以home img hover DIV height等于0；表示项目不可见，因此您无法在元素上看到任何样式。.主img hover DIV height等于0，因为您使用了.fadeTo（'slow'，0）；表示项目不可见，因此您无法在元素上看到任何样式。