Question

我在div中有两个图像。相同的宽度/高度以及对悬停的影响以显示次要元素。但是，次要图像在第一个图像之前显示，这不是预期的行为。

CSS：

.div-container {
    position: relative;
}

.div-container img.primary {
    position: relative;
}

.div-container img.secondary {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out;
}

.div-container img.secondary:hover {
    opacity: 0;
}

HTML：

<div class="div-container">
    <img class="primary">
    <img class="secondary">
</div>

问题：我想先显示主要图片。

示例：http://jsfiddle.net/A6y7Y/

Answer 1

您可以使用z-index并更改:hover效果上的值，也可以轻松切换图像。但是你应该在这里寻找的是将它们放在一个文件中并使用CSS像Sprite一样控制背景图像的位置。 Here is a good example

Answer 2

交换主要和辅助css样式的css样式并将z-index添加到主要，因为1应该解决问题

HTML

`<div class="div-container">
    <div class="primary">Layer1</div>
    <div class="secondary">Layer2</div>
</div>`

CSS

`.div-container {
    position: relative;
}
.div-container div{
    width:100px;`enter code here`
    height:100px;
    border:1px solid red;
}
.div-container .secondary {
    position: relative;
    background-color: blue;
}

.div-container .primary {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out;
    background-color: #ccc;
    z-index:1;
}

.div-container .primary:hover {
    opacity: 0;
}`

Answer 3

我解决了这个问题。

出于某种原因，将opacity: 0设置为悬停图像，使其首先显示。我所做的就是将次要图像设置为opacity: 0，并将容器div悬停在opacity: 1上（而不是悬停的图像）。我还为两个图像添加了z-index，其次要图像具有更高的索引。在我正在使用的代码下面，希望它可以在将来帮助某人。

.div-container {
    position: relative;
}

.div-container img.primary {
    position: relative;
    z-index: 5;
}

.div-container img.secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 6;
    transition: opacity 1s ease-in-out;
}

.div-container:hover img.secondary {
    opacity: 1;
}

使相对元素出现在绝对元素相同的容器之前

3 个答案: