Change image and text on hover and click

问题

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
}

回答1:

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

回答2:

This works on click http://dabblet.com/gist/3138537

回答3:

My 2 cents on how to create an image with a text below it, where hovering either one will lift the image up by 15px. The text stays in its own place. Taken directly from my website so may need editing for your personal use.

CSS:

.menu_imgdiv
{
    display:inline-block;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
}

.menu_imgdiv p
{
    padding-top:4px;
    text-align:center;
    font-size:larger;
}

.menu_img
{
    width:128px;
    height:128px;
}

.menu_imgdiv:hover .menu_img,
.menu_imgdiv:hover .menu_imgdiv p
{
    margin: -15px 0px 15px;
}

And the HTML:

<div id="tm_header">  
    <a href="#/"> <div class="menu_imgdiv"> 
    <img class="menu_img" src="images/home.png" />
    <br /> <p>Homepage</p>  </div> </a>
</div>

回答4:

You could make the text and image into one image with the image you want it to turn into below (in the same jpeg, gif or png), then use the :hover function to change the background position of the image.

The css would be:

div.imagecontainer {
width:50px;/*be sure to specify a height & width*/
height:50px;
background:url(images/example.jpeg);
background-position:0px 0px;
overflow:hidden;
}

div.imagecontainer:hover {
background-position:0px -50px;
}

This would then eliminate the need for a second image. If you use this technique be sure to add a paragraph element with the text you were going to have written there and use either visibility:hidden; z-index:-100; or text-indent:1000px; with overflow:hidden; to hide it.

回答5:

An image

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

On hover display a different image

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }

来源：https://stackoverflow.com/questions/11548856/change-image-and-text-on-hover-and-click

标签

html

css

image

hover