Question

我有多行，每行有3个div。每个div由两行组成;在第一行中显示图片，在第二行中显示描述。 HTML是这样的：

<div id="row">
    <div id="block1">
        <div id="block1-top"><a><img></a></div>
        <div id="block1-bottom">Text here</div>
    </div>
    <div id="block2">
        <div id="block2-top"><a><img></a></div>
        <div id="block2-bottom">Text here</div>
    </div>
    <div id="block3">
        <div id="block3-top"><a><img></a></div>
        <div id="block3-bottom">Text here</div>
    </div>
</div>

<div id="row">
    <div id="block1">
        <div id="block1-top"><a><img></a></div>
        <div id="block1-bottom">Text here</div>
    </div>
    <div id="block2">
        <div id="block2-top"><a><img></a></div>
        <div id="block2-bottom">Text here</div>
    </div>
    <div id="block3">
        <div id="block3-top"><a><img></a></div>
        <div id="block3-bottom">Text here</div>
    </div>
</div>

一些CSS：

#block1, #block2, #block3
{
    width: 25%;
    height: 150px;
    display: inline-block;
    vertical-align: top;
    background-color: #FFFFFF;
    border: 1px solid #154494;
}

#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}

我希望在父div的悬停时，块底部的文本颜色会更改为＃FEB90D。例如，当悬停在block1上时，我希望block1-bottom的文本颜色变为＃FEB90D。我找到了一个为我这样做的脚本：

$(function() {
  $('#block1').hover(function() {
    $('#block1-bottom').css('color', '#FEB90D');
  }, function() {
    // on mouseout, reset the background colour
    $('#block1-bottom').css('color', '#FFFFFF');
  });
});

但是，这仅适用于第一行的第一个块。我认为这是因为第1，第2和第3块的id具有相同的名称，并且脚本无法确定应用脚本的块。

有没有人对如何修复此问题有任何想法，而不更改所有div的ID？我总共有11行，所以在我看来，每个div都使用不同的名称。所以基本上，脚本需要改变悬停div的第二个孩子的颜色。

Answer 1

您不应该将id用于多个元素。更改类的ID，它将起作用。

Answer 2

最好用CSS

来做这件事

.block1 > .block1-bottom {
  color: #FFFFFF;
}

.block1:hover > .block1-bottom {
  color: #FEB90D;
}

<div class='block1'>
  <p class='block1-top'>This is paragraph 1</p>
  <p class='block1-bottom'>This is paragraph 2</p>
</div>

无论如何，ID应该是唯一的。如果你在jQuery中这样做，它应该是这样的。

$(function() {
    $('.block1').on("mouseover", function() {
        $('.block1-bottom').css('color', '#FEB90D');
    }).on("mouseout", function() {
        $('.block1-bottom').css('color', '#FFFFFF');
    });
});

Answer 3

Ids应该是唯一的。所以添加必要的类并使用类选择器。所以代码类似于下面的

$('.row .box').hover(function() {
      $(this).find(".boxbottom").css('color', '#FEB90D');    
  }, function() {
    // on mouseout, reset the background colour    
    $(this).find(".boxbottom").css('color', '#FFFFFF');
  });

以下是演示https://jsfiddle.net/afnhjdjy/

Answer 4

清理重复的ID问题后，您可以在没有javascript的情况下执行此操作：

<div class="row">
    <div class="block">
        <div class="block-top"><a><img></a></div>
        <div class="block-bottom">Text here</div>
    </div>
    <div class="block">
        <div class="block-top"><a><img></a></div>
        <div class="block-bottom">Text here</div>
    </div>
</div>

CSS：

.block:hover .block-bottom {color: #FEB90D}

Answer 5

根据这种情况：

我希望在父div的悬停时，块底部的文本颜色会更改为＃FEB90D

您可以简单地使用：

.block:hover .block-bottom{
    color: #FEB90D;
}

当div共享一个id时，如何更改另一个元素的特定div onHover的样式

5 个答案: