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

Question

As you can see in this JSFiddle , while you hovering over text-content ; the opacity img and the img classes return to a normal state, and I would like to keep :hover from img and img opacity while hovering over text-content .

Also I would like to know how to set the background-color of image's background.

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);
}

How can I fix this?

Answer 1

No need for drastic changes in HTML or even to add javascript. ;)

Instead of assigning CSS to .opacity img:hover try to assign it to .opacity:hover img like

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

The effect is basically the same and the size stays while hovering the text (except for the gap between image and text). See the demo .

Answer 2

Here is one solution using only CSS. It does rearrange a bit of your HTML and CSS, though, because I felt you had a bit too much going on. I have provided a simplified solution that should be transferable to whatever markup you're using without much/any difficulty.

With the exact markup that you provided, the effect was not possible because the child element was removed from the normal document flow, thanks to position: absolute; . The key to keeping a parent element's hover state active when hovering over its child is to make sure the child is still within the parent's box model (and, therefore, "within the flow").

The below implementation differs from yours visually only in that the "grey" background extends downward to cover the child span element.

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>