更改悬停时的图像和文本并单击

2022-01-22 00:00:00 image hover html css

我有一个图像和文本随它一起放在一边，我想在悬停或单击图像时同时更改这两个.

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;
}

相关文章