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移到浮动的第一个地方

Answer 2

如果只使用div中的图像，那么这个jquery就会这样做：

$('#applyimg').hover(function(){
        $(this).attr('src','/design/sendcv_over.png');
        },function(){
             $(this).attr('src','/design/sendcv.png'); 
        });

HTML

<img id='applyimg' src='/design/sendcv.png'> 

将鼠标悬停在图像的上方