html - CSS 无法让悬停状态在简单的 div 上运行

Question

这是一个棘手的问题......

我有一个 div，当悬停在它的任何部分上时，它的内容应该会发生变化。

这是一张详细说明两种通缉状态的图片:

到目前为止，这是尽力而为: codepen..它需要一些工作。

非常感谢任何帮助!

到目前为止，这是 HTML:

    <div class="item green">


     <a href="#">
      <h4>Welcome</h4>

      <p>Click here to find out more</p>
      <img src="http://www.veropixel.com/res01-170w115h.jpg"/>
    </a>
</div> <!-- /item -->

Answer 1

这就是我的解决方案 http://codepen.io/anon/pen/mIrvA :

  $resinGreen: #00a14a;

  .green { background: $resinGreen; }

  .item {
        width: 300px;
        margin-bottom: 5px;

        a {
              display: block;
              height: 98px;
              overflow: hidden; /* cancels img float */
              text-decoration: none;

        h4, p {
              height: 98px;
              line-height: 98px; /* Two lines added to center 
              vertically text of course you can use display:inline-block
               with vertical-align:middle */
              padding-left: 15px;
              margin:0;
        }

        img {
              float: right;
              height: 98px;
        }

        p {
              display: none;
        }

        &:hover {
             h4, img { display: none; }
             p { display: block; }
        }
      }

    }

你的问题是你的链接没有高度所以这就是它闪烁的原因，我也将 img 移动到第一个 float 位置