html - 如何通过CSS更改图像覆盖整个div

Question

我想弄清楚，如何让两个 div 对 onmouseover 事件使用react。一个应该用图片覆盖另一个，而底部的 div 应该包含另一个图像和其他元素，如按钮、文本等。你能告诉我，我需要如何调整我的代码才能使其工作吗？

HTML:

<div id="container">    
    <div id="bottom" >
        <img id="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
        <p id="text">
            Hello World!
        </p>
    </div>
    <div id="top">
      <img  id="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
    </div>
</div>

CSS:

#container img {
  position:absolute;
  height:400px;
  width:400px;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#top img:hover {  
    opacity:0; 
}
#text{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

这就是我到目前为止所得到的。但是我只需要在显示底部图像时显示 Hello world。如果我在那里有一些按钮，让它只在这些情况下使用react。

http://jsfiddle.net/L7XCD/733/

Answer 1

如果您只想在底部元素上添加可点击元素，最简单的方法就是切换顶层和底层。因此，您使顶层(包括按钮和文本)透明并将其放在可见图像上。 悬停时，您只需将其混合即可。 如果您以其他方式围绕顶部图像进行操作，则会阻止点击事件。 我在这里举了一个小例子:

http://jsfiddle.net/L7XCD/732/

HTML:

<div class="container">    
<div class="cat-image bottom">
  <img  class="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
<div class="cat-image top" >
    <img class="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
    <p class="text">
        Hello World!
    </p>
    <button>Click meow!</button>
</div>

CSS:

.top {
    position: relative;
    opacity: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; 
}

.top:hover {
    opacity: 1;
}

.bottom {
    position: absolute;
    top: 0;
}