CSS-only 悬停在 div 上取消隐藏 CodePen 上的文本，但不是在我的 WP 网站上. [英] CSS-only hover over div un-hides text on CodePen, but not on my WP site.

问题描述

我正在尝试设置一个 div，当您将鼠标悬停在图像上时，它会在图像上显示文本.它在 CodePen 上运行良好，但在我的 WordPress 网站上却不行.我尝试使用一些 CSS，但我尝试过的所有东西都没有成功.现场正在建设中.有什么建议吗?

I'm trying to set up a div that shows text over an image when you hover over it. It works fine on CodePen, but not on my WordPress site. I tried playing with some of the CSS, but none of the things I tried ended up working. Site under construction. Any suggestions?

这里是 CodePen 的代码:http://codepen.io/Clare12345/pen/RWoxRB.也适用于小提琴:http://jsfiddle.net/Clare12345/yxap7n30/:/

Here is the code for CodePen: http://codepen.io/Clare12345/pen/RWoxRB. Also works on Fiddle: http://jsfiddle.net/Clare12345/yxap7n30/ :/

HTML:

    <div class="container">

        <div class="sep">

            <div class="image-hover img-layer-image-hover-backgroundchange">
                <img src="http://www.plici.ro/images/3-1386110366.jpg">
                <div class="layer">this text should appear on hover</div>
            </div>

        </div>

</div>

和 CSS:

/****** image hover ******/

.image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.image-hover { position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff;box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
.image-hover a { text-decoration: none; }

/*** effect layer-image hover - background change ***/
.img-layer-image-hover-backgroundchange .layer { position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0.6;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-backgroundchange:hover .layer {opacity:0.5;background-color:#fff;
}
.img-layer-image-hover-backgroundchange .layer {
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}

.img-layer-image-hover-backgroundchange:hover .layer {
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}

推荐答案

哦，我想通了.事实证明，我需要将子 div 设置为在悬停在父级上时显示，而在未悬停时不显示子级.

Oh, I figured it out. It turns out I needed to set the child div to show when hovering over the parent and display none the child when not being hovered over.

这有帮助:更改当父元素悬停在 jQuery 上时子元素的 CSS(只是 CSS 部分，不是第一个答案)

This helped: Changing the child element's CSS when the parent is hovered with jQuery (Just the CSS portion, not the first answer)

谢谢！！！

这篇关于CSS-only 悬停在 div 上取消隐藏 CodePen 上的文本，但不是在我的 WP 网站上.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！