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,但我尝试的所有事情都没有结束。网站正在建设中。有什么建议?
以下是CodePen的代码: http://codepen.io/Clare12345/pen/RWoxRB 。也适用于小提琴: http://jsfiddle.net/Clare12345/yxap7n30/
: / b>
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>此文字应出现在悬停< / div>
< / div>
< / div>
< / div>
和CSS:
/ ******图片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; }
$ b / ***效果图层悬停 - 背景更改*** /
.img-layer-image-hover-backgroundchange .layer {position:absolute; top:0px;右:0像素;底部:0像素;左:0像素;不透明度:0.6;背景色:#000;背景图像:URL(图标/ lupe.png);背景重复:不重复;背景位置: 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:全部.4s缓入;
-moz-transition:全部.4s缓和;
-ms-transition:全部.4s缓入;
-o-transition:全部.4s缓和;
}
.img-layer-image-hover-backgroundchange:hover .layer {
transition:all .2s ease-in-out;
-webkit-transition:全部.2s缓出;
-moz-transition:所有.2s缓出;
-ms-transition:全部.2s缓出;
-o-transition:所有.2s缓进;
}
哦,我知道了。事实证明,我需要将鼠标悬停在父级上方时显示,并且在没有将鼠标悬停时不显示。
这有助于:当父母用jQuery悬停时,更改子元素的CSS (只是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?
Here is the code for CodePen: http://codepen.io/Clare12345/pen/RWoxRB. Also works on Fiddle: http://jsfiddle.net/Clare12345/yxap7n30/ :/
The 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>
and the 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;
}
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.
This helped: Changing the child element's CSS when the parent is hovered with jQuery (Just the CSS portion, not the first answer)
Thank you!!!
这篇关于CSS-only悬停在div上,隐藏CodePen上的文本,但不在我的WP网站上。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!