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

【问题标题】：How to change styling of a specific div onhover of another element when divs share an id当div共享一个id时如何更改另一个元素的特定div的样式
【发布时间】：2016-02-02 20:26:58
【问题描述】：

我有多行，每行 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');
  });
});

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

在不更改所有 div id 的情况下，是否有人对如何解决此问题有任何想法？我总共有 11 行，所以在我看来，为每个 div 使用单独的名称并不是一个真正的选择。所以基本上，脚本需要改变悬停div的第二个孩子的颜色。

【问题讨论】：

id 值必须是唯一的。
在这里查看演示 stackoverflow.com/a/35163293/3733816

标签： javascript jquery html css

【解决方案1】：

您不应将 id 用于多个元素。更改这些类的 id 即可。

【讨论】：

【解决方案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');
    });
});

【讨论】：

【解决方案3】：

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

$('.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/

【讨论】：

【解决方案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}

【讨论】：

【解决方案5】：

根据这种情况：

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

你可以简单地使用：

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

【讨论】：