Question

当我将鼠标悬停在相册元素（图像）上时，我想在图像顶部显示p元素（ID用于CSS背景图像）。我尝试过以下方法：

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

我还在display:none;上尝试了display:block和:hover，但似乎没有人为我工作。我做错了什么？

Answer 1

如果您想要快速修复，只需使.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/

更好的解决方法：

这是因为您的#gallery .album p样式覆盖了.album:hover p样式（ID更重要＆＃34;重要＆＃34;而不是类）。

您可以从#gallery移除#gallery .album p或将其添加到.album:hover p，然后在没有!important标记的情况下运行。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果我理解你的问题是正确的......这对你有用。 :)

http://codepen.io/anon/pen/JYjgmy

.album p {
  opacity:0;
}

.album:hover p {
  opacity:1;
}

Answer 3

对代码进行一些修改后，可以根据需要进行修改。可能还有其他一些方法，但它们可以是其他答案。

<!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>

CSS在另一个div上显示div：悬停

3 个答案: