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

【问题标题】：Change image and text on hover and click更改悬停时的图像和文本并单击
【发布时间】：2012-07-17 22:19:33
【问题描述】：

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

我可以设法让图像和文本分别交换，但不能同时交换。

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
}

【问题讨论】：

标签： html css image hover

【解决方案1】：

一张图片

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

悬停时显示不同的图像

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

如果元素是锚点或定义了一些 onclick 函数.. 使用新类在选择时显示不同的图像

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

【讨论】：

【解决方案2】：

我的 2 美分关于如何创建带有文本下方的图像，悬停其中任何一个都会将图像提升 15 像素。文本保留在自己的位置。直接取自我的网站，因此可能需要编辑以供您个人使用。

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

还有 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>

【讨论】：

【解决方案3】：

这适用于点击http://dabblet.com/gist/3138537

【讨论】：

【解决方案4】：

您可以将文本和图像与您希望它变成的图像在下面（在相同的 jpeg、gif 或 png 中）合为一个图像，然后使用 :hover 函数更改图像的背景位置。

css 是：

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

这样就不再需要第二张图片了。如果您使用此技术，请务必添加一个段落元素，其中包含您将要在那里编写的文本并使用可见性：隐藏； z 指数：-100；或文本缩进：1000px；溢出：隐藏；隐藏它。

【讨论】：

但是你能告诉我更多关于如何从图像和文本中创建图像吗？
使用图像编辑器，最好是 Adobe Photoshop，但如果您环顾四周，可以使用各种免费的。您需要能够以像素为单位指定画布大小以创建自定义大小的图像。

【解决方案5】：

不要尝试在每个单独的 div（图像容器和文本）的悬停上执行此操作，而是更改包含 div（框容器）的悬停时的不透明度。 CSS 看起来像这样：

.box-container:hover .image-container,
.box-container:hover #text {
    opacity: 0;
}

【讨论】：