本文介绍了更改悬停时的图像和文本并单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个图像和文本随它一起放在一边，我想在悬停或单击图像时同时更改这两个.
I have one image and text that goes along with it to the side and i want to change both of these at the same time on hover or by clicking on the image.
我可以设法让图像和文本分别交换，但不能同时交换.
I can manage to get the image and the text to swap separately but not both.
<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 看起来像这样:
Instead of trying to do this on the hover of each individual divs (image-container and text), change the opacity on the hover of the containing div (box-container). CSS would look like this:
.box-container:hover .image-container,
.box-container:hover #text {
opacity: 0;
}
这篇关于更改悬停时的图像和文本并单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！