悬停并更改图片和文字后点击 [英] Change image and text on hover and click
问题描述
我有一个图片和文字随它一起出现在旁边，我希望在悬停或点击图片的同时更改这两个图片。
HTML
<$>
我可以设法让图片和文字分开交换，但不能同时交换。 p $ p> <身体GT;
< div id =page-container>
< div class =box-container>
< div class =image-container>
< a href =＃>< img src =。jpgheight =100width =200/>< / a>
< / div>
< div class =second-image-container>
< a href =＃>< img src =。jpgheight =100width =200/>< / a>
< / div>
< div id =text>
< div id =text-box>
< p>这是一些文字< / p>
< p id =more-text>这是一些更多的文字< / p>
< / div>
< / div>
< div id =text-two>
< div id =text-box-two>
< p>这是一些文字< / p>
< p id =even-more-text>这是一些更多的文字< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
CSS
div＃text {
position：absolute;
背景颜色：黑色;
width：350px;
height：300px;
top：10px;
right：-65px;
}
div＃text p {
position：absolute;
颜色：白色;
top：100px;
left：125px;
}
div＃文本框p {
background-color：blue;
width：
}
div＃text-box p＃more-text {
background-color：red;
top：65px;
left：90px;
}
div.image-container {
opacity：1;
位置：绝对;
z-index：500
}
div.second-image-container {
position：absolute;
top :;
opacity：1;
z-index：119
}
div＃text-two {
position：absolute;
背景颜色：黑色;
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;
}
/ *以及使每个单独图像和文本交换的CSS：* /
div.image-container：hover，div＃text：hover {
opacity：0
}
尝试在每个单独div（图像容器和文本）的悬停上执行此操作时，请更改包含div（box-container）悬停上的不透明度。 CSS看起来像这样：
.box-container：hover .image-container，
.box-container： hover #text {
opacity：0;
}
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.
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
}
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;
}
这篇关于悬停并更改图片和文字后点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
