Html 将鼠标悬停在另一个上方时保持：悬停效果：悬停

如图所示，当您将鼠标悬停在文本内容上时；

opacity img

和

img

类返回正常状态，我希望保持

：在
文本内容
上悬停时，悬停
img
和
img opacity

我还想知道如何设置图像背景的背景色

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>

如何解决这个问题？
无需对HTML进行剧烈更改，甚至无需添加javascript

不要将CSS分配给
。不透明度img:hover
尝试将其分配给
。不透明度：hover img
类似

    .opacity img { opacity:0.7; transition-duration: 0.5s; }

    .opacity:hover img { opacity:1; transition-duration: 1s; }

    .opacity 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; }

    .opacity:hover img{ 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; }

效果基本相同，悬停文本时大小保持不变（除了图像和文本之间的间隙）。请参阅
这里有一个仅使用CSS的解决方案。不过，它确实重新安排了一点HTML和CSS，因为我觉得你做的太多了。我已经提供了一个简化的解决方案，可以毫无困难地转移到您正在使用的任何标记中

由于
position:absolute。将鼠标悬停在其子元素上时，保持父元素悬停状态处于活动状态的关键是确保子元素仍在父元素的长方体模型中（因此“在流中”）

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



。不透明度img：悬停{
不透明度：1；
过渡时间：1s；
}
img{
不透明度：0.7；
背景：rgba（0,0,0,0.5）；
-webkit变换：比例（0.9）；
-moz变换：比例（0.9）；
-o变换：标度（0.9）；
变换：比例（0.9）；
过渡时间：0.5s；
}
img：悬停{
背景：rgba（0,0,0,0.9）；
-webkit转换：比例（1.0）；
-moz变换：比例（1.0）；
-o变换：比例（1.0）；
变换：比例（1.0）；
过渡时间：1s；
}
.文本内容{
背景：rgba（0,0,0,0.5）；
颜色：白色；
光标：指针；
显示：表格；
高度：20px；
宽度：175px；
不透明度：0；
边框：1px透明虚线；
-webkit转换：不透明度1s；
-moz转变：不透明度1s；
-o-转变：不透明度1s；
过渡：不透明度1s；
}
.不透明度：悬停.文本内容{
不透明度：1；
边框：1px虚线rgba（255,255,255,0.1）；
}
.不透明度：悬停img{
背景：rgba（0,0,0,0.9）；
不透明度：1；
-webkit转换：比例（1.0）；
-moz变换：比例（1.0）；
-o变换：比例（1.0）；
变换：比例（1.0）；
过渡时间：1s；
}

这会出现的
仅凭CSS是不可能实现您的愿望的。我建议jQuery.jQuery在我的情况下是不可能的，任何Javascript解决方案？@user3734782任何在jQuery中可行的东西都可以通过Javascript实现，因为jQuery是一个完全建立在JavaScriptI之上的库。我想要JS解决方案；）我似乎没有足够清楚地阅读您的问题，并假设您希望永远保持悬停状态，而不仅仅是在特定的不同元素上。我的错，你能帮我吗？有JSFIDLE-忽略边缘和填充；他们在我的网站上是好的问题是，当我添加另一个它出现在第一个，我想把他们在一行。谢谢。@user3734782这是因为他们有一个类
框
，在你的CSS中，你正在应用
位置：绝对到该框，该框将元素从正常文档流中取出，并将其放置在精确的坐标位置。因此，自然地，任何带有class
box
的元素都将应用相同的CSS属性，这意味着任何带有class
box
的元素都将出现在完全相同的位置。
    .opacity img { opacity:0.7; transition-duration: 0.5s; }

    .opacity:hover img { opacity:1; transition-duration: 1s; }

    .opacity 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; }

    .opacity:hover img{ 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; }