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

无需对HTML进行大幅更改，甚至无需添加javascript。 ;）

不要将CSS分配给.opacity img:hover，而是尝试将其分配给.opacity: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; }

效果基本相同，并且在悬停文本时尺寸保持不变（图像和文本之间的间隙除外）。请参阅 demo 。

Answer 2

这是一个仅使用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>

保持：悬停在另一个上方时悬停效果：悬停

2 个答案: