html - 保留 :hover effect when hovering over another :hover

Question

正如您在此 JSFiddle 中看到的那样，当您将鼠标悬停在 text-content 上时； opacity img 和 img 类返回到正常状态，我想保持 :hover 来自 img 和 img opacity 同时将鼠标悬停在 text-content 上。

另外我想知道如何设置图片背景的background-color。

HTML

<ul class="img-list">
    <li>
    <div class="table-responsive">
        <table align="left" cellpadding="1" cellspacing="1" class="modernTable">
            <tbody>
                <tr>
                    <td style="border-color: transparent; text-align: center; vertical-align: top; width: 175px; height: 80px; background-color: rgba(25, 25, 25, 0.1);">
                    <section class="opacity">
                        <img alt="" src="http://i.imgur.com/TrwyFfT.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 175px; height: 79px;"><span style="font-size:14px;"><span class="text-content">This will show up</span></span></section>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ul>

CSS:

.opacity img {
    opacity:0.7;
    transition-duration: 0.5s;
}
.opacity img:hover {
    opacity:1;
    transition-duration: 1s;
}
img {
    background: rgba (0, 0, 0, 0.5);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    transition-duration: 0.5s;
}
img:hover {
    background: rgba (0, 0, 0, 0.9);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    transition-duration: 0.5s;
}
ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul.img-list li {
    display: inline-block;
    height: 79px;
    margin: 0 1em 1em 0;
    position: relative;
    width: 175px;
}
span.text-content {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 20px;
    left: 0;
    position: absolute;
    top: 100px;
    width: 175px;
    opacity: 0;
    border: 1px dashed transparent;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
span.text-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
ul.img-list li:hover span.text-content {
    opacity: 1;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

我该如何解决这个问题？

Answer 1

这是一种仅使用 CSS 的解决方案。不过，它确实重新安排了您的一些 HTML 和 CSS，因为我觉得您的工作有点太多了。我提供了一个简化的解决方案，应该可以毫不费力地转移到您正在使用的任何标记。

使用您提供的确切标记，由于 position: absolute;，子元素已从正常文档流中删除，因此无法实现效果。当悬停在其子元素上时，保持父元素的悬停状态处于事件状态的关键是确保子元素仍在父元素的框模型中(因此，“在流中”)。

下面的实现在视觉上与您的不同之处仅在于“灰色”背景向下延伸以覆盖子 span 元素。

JSFiddle

.opacity img:hover {
    opacity:1;
    transition-duration: 1s;
}
img {
    opacity:0.7;
    background: rgba (0, 0, 0, 0.5);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    transition-duration: 0.5s;
}
img:hover {
    background: rgba (0, 0, 0, 0.9);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    transition-duration: 1s;
}
.text-content {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 20px;
    width: 175px;
    opacity: 0;
    border: 1px dashed transparent;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.opacity:hover .text-content {
    opacity: 1;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}
.opacity:hover img {
    background: rgba (0, 0, 0, 0.9);
    opacity: 1;
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    transition-duration: 1s;
}

<table align="left" cellpadding="1" cellspacing="1" class="modernTable">
    <tbody>
        <tr>
            <td style="border-color: transparent; text-align: center; vertical-align: top; width: 175px; height: 80px; background-color: rgba(25, 25, 25, 0.1);">
                <section class="opacity">
                    <img alt="" src="http://i.imgur.com/TrwyFfT.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 175px; height: 79px;" /><span class="text-content">This will show up</span>
                </section>
            </td>
        </tr>
    </tbody>
</table>