use*_*882 1 html css image hover
我有一个图像和文本与它一起,我希望在悬停或通过单击图像同时更改这两个.
我可以设法让图像和文本分开交换,但不能同时交换.
<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>
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
}
小智 5
而不是尝试在每个单独的div(图像容器和文本)的悬停上执行此操作,更改包含div(框容器)的悬停时的不透明度.CSS看起来像这样:
.box-container:hover .image-container,
.box-container:hover #text {
opacity: 0;
}