Question

我试图找出，如何让两个div对onmouseover事件作出反应。一个应该覆盖另一个图片，而底部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世界..如果我在那里有一些按钮，只能在那些情况下做出反应。

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

Answer 1

#top {
    z-index: 10;
    position: relative;
}

#bottom #text {
    z-index: 1;
}

这应该可以解决问题。

Answer 2

如果您只想在底部元素上使用可点击元素，最简单的方法就是切换顶层和底层。因此，您将顶层（包括按钮和文本）透明并将其放在可见图像上。在悬停时，您只需将其融入其中。如果你这样做，那么围绕顶部图像的另一种方式是阻止clickevents。我在这里举了一些例子：

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

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

2 个答案: