CSS在另一个div上显示div：hover
[英]CSS display div on another div:hover
问题描述
I want to display the p elements on top of the images (the IDs are used for CSS background images) when I hover over the album elements (the images). 
当我将鼠标悬停在相册元素（图像）上时，我想在图像顶部显示p元素（ID用于CSS背景图像）。 I have tried the following: 我尝试了以下方法：
.album { width: 230px; height: 230px; background-color: gray; float: left; list-style: none; position: relative; transition: all 0.5s ease; } #gallery .album p { opacity: 0; width: 100%; text-align: center; position: absolute; bottom: 50px; } .album:hover { -webkit-filter: grayscale(100%) brightness(50%); } .album:hover p { opacity: 1; }
<ul id="gallery"> <li id="nsfm" class="album"> <p>New Shapes for Madness LP - 2014</p> </li> <li id="unsettled" class="album"> <p>Unsettled EP - 2013</p> </li> <li id="aptw" class="album"> <p>A Path to Wrath LP - 2012</p> </li> <li id="pfw" class="album"> <p>Pieces from Wasteland EP - 2011</p> </li> </ul>
I have also tried display:none; 我也尝试过display:none; and display:block on :hover but none seem to be working for me. 并在:hover上display:block ，但似乎对我没有用。 What am I doing wrong? 我究竟做错了什么？
3 个解决方案
解决方案1
3 已采纳 2015-09-02 17:20:35
If you want a quick fix just make the declarations on the .album:hover p class important, and add a transition to the p tag. 如果您想快速修复，只需将.album:hover p类上的声明.album:hover p重要，然后向p标签添加过渡即可。
#gallery .album p {
transition: all 0.5s ease;
}
.album:hover p {
visibility:visible !important;
opacity:1 !important;
}
http://jsfiddle.net/w3hutbu8/ http://jsfiddle.net/w3hutbu8/
A better fix: 更好的解决方案：
This happens because your #gallery .album p styling is overriding the .album:hover p one (an ID is more "important" than a class). 发生这种情况是因为您的#gallery .album p样式覆盖了.album:hover p一个（ID比类更“重要”）。
You can either remove the #gallery from #gallery .album p or add it to .album:hover p and then it will work without the !important tag. 您可以从#gallery .album p删除#gallery或将其添加到.album:hover p ，然后它将在没有!important标记的情况下运行。
.album { width: 230px; height: 230px; background-color: gray; float: left; list-style: none; position: relative; transition: all 0.5s ease; } .album p { opacity: 0; width: 100%; text-align: center; position: absolute; bottom: 50px; } .album:hover { -webkit-filter: grayscale(100%) brightness(50%); } .album:hover p { opacity: 1; }
<ul id="gallery"> <li id="nsfm" class="album"> <p>New Shapes for Madness LP - 2014</p> </li> <li id="unsettled" class="album"> <p>Unsettled EP - 2013</p> </li> <li id="aptw" class="album"> <p>A Path to Wrath LP - 2012</p> </li> <li id="pfw" class="album"> <p>Pieces from Wasteland EP - 2011</p> </li> </ul>
解决方案2
1 2015-09-02 17:30:37
If I understood your question correct... This will work for you. 如果我正确理解了您的问题，这将为您工作。 :) :)
http://codepen.io/anon/pen/JYjgmy http://codepen.io/anon/pen/JYjgmy
.album p {
opacity:0;
}
.album:hover p {
opacity:1;
}
解决方案3
0 2015-09-02 18:19:59
With some modification to your code it can results as you desired. 通过对代码进行一些修改，可以按需要生成结果。 There may be some other ways to do this, but they can be other answers. 可能有其他方法可以做到这一点，但它们可以是其他答案。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.album {
width:230px;
height:230px;
background-color:grey;
float:left;
list-style:none;
position:relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p {
position: absolute;
top:0;
display: none;
width:100%;
height: 50px;
text-align:center;
bottom:50px;
}
.album:hover p{
display: block;
font-size: 20px;
}
.album:hover{
-webkit-filter: grayscale(100%) brightness(50%);
}
</style>
</head>
<body>
<ul id="gallery">
<li id="nsfm" class="album"><p>New Shapes for Madness LP - 2014</p></li>
<li id="unsettled" class="album"><p>Unsettled EP - 2013</p></li>
<li id="aptw" class="album"><p>A Path to Wrath LP - 2012</p></li>
<li id="pfw" class="album"><p>Pieces from Wasteland EP - 2011</p></li>
</ul>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.