我有一张图片和旁边的文字，我想在悬停或点击图片时同时更改这两者。
我可以设法让图像和文本分别交换，但不能同时交换。
HTML
<body>
<div id="page-container">
<div class="box-container">
<div class="image-container">
<a href="#"><img src=".jpg" height="100" width="200"/></a>
</div>
<div class="second-image-container">
<a href="#"><img src=".jpg" height="100" width="200"/></a>
</div>
<div id="text">
<div id="text-box">
<p>This is some text</p>
<p id="more-text">This is some more text</p>
</div>
</div>
<div id="text-two">
<div id="text-box-two">
<p>This is some text</p>
<p id="even-more-text">This is some more text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
div#text {
position: absolute;
background-color: black;
width: 350px;
height: 300px;
top: 10px;
right: -65px;
}
div#text p {
position: absolute;
color: white;
top: 100px;
left: 125px;
}
div#text-box p {
background-color: blue;
width:
}
div#text-box p#more-text {
background-color: red;
top: 65px;
left: 90px;
}
div.image-container {
opacity: 1;
position: absolute;
z-index: 500
}
div.second-image-container {
position: absolute;
top:;
opacity: 1;
z-index: 119
}
div#text-two {
position: absolute;
background-color: black;
width: 350px;
height: 300px;
right: -65px;
top: 10px;
}
div#text-box-two p {
position: absolute;
background-color: blue;
z-index: 10
}
div#text-box-two p#more-text {
background-color: red;
}
/*and the CSS that makes each individual image and text to swap:*/
div.image-container:hover, div#text:hover {
opacity: 0
}
最佳答案
与其尝试在悬停每个单独的 div(图像容器和文本)时执行此操作，不如在悬停包含的 div(框容器)时更改不透明度。 CSS 看起来像这样:
.box-container:hover .image-container,
.box-container:hover #text {
opacity: 0;
}
关于html - 在悬停时更改图像和文本并单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11548856/