html - 如何在使用 CSS 将鼠标悬停在图像上时更改同一区域中的文本？

Question

我想在鼠标悬停在图像上时更改文本，但我无法解决这个问题。这个问题让我发疯。每个图像都有不同的文本。将鼠标悬停在图像上时，该图像的文本将出现在文本框中。 为了描述这个主题，我在这里给出一张图片: 查看此 link 上的图片

我在 JSFIDDLE 中提供了我的 HTML 和 CSS 代码 还在这里给出 HTML 和 CSS 代码: HTML 代码:

        <div id="tabbox">
            <div id="tab1">
                <img src="http://placehold.it/240X240">
                <div class="tabcontent">
                    <p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p>

                </div>
            </div>

            <div id="tab2">
                <img src="http://placehold.it/240X240">
                <div class="tabcontent">
                    <p>Another text comes here for hover the mouse on the image.</p>
                </div>
            </div>
        </div>

此处的 CSS 代码:

    #tabbox{
    width: 90%;
    height: 380px;
    position: relative;
    border: 2px solid #888;
}

#tabbox img{
    cursor: pointer;
    display: block;
    width: 240px;
    height: 240px;

}

.tabcontent{
    padding:10px 0 0 40px;
    background:#fff;
    border:1px solid #000;  
    left:0;
    top:40px;
    height:120px;
    display:block;
    margin-top:40px;
    transition: all 1.2s;
}

#tab1{
float: left;
}

#tab2 {
float: left;
left: 250px;
width: 480px;
}

#tab1.tabcontent{
            z-index:2;
            background:#fff;
        }

#tab1 img{
            z-index:3;
            width:240px;
            position:absolute;
            left:0;
            top:0;
            cursor:hand;
            background:#fff;

}

#tab2.tabcontent{
            z-index:1; 
            opacity:0;
        }

#tab2 img{
    width:220px;
    position:absolute;
    left:260px;
    top:0;
    cursor:hand;
    background: #ddd;
}

    #tabbox:hover img, #tabs:focus img, #tabs:active img{
        background:none;
        z-index:0;
        }

    #tabbox:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent{
        z-index:0;
        opacity:0;
        -webkit-transition : opacity .75s ease-in;
        }

    #tab1:hover img,#tab1:focus img,#tab1:active img{z-index:4;background:#fff;}
    #tab1:hover .tabcontent,#tab1:focus .tabcontent,#tab1:active .tabcontent{   z-index:3;  background:#fff; opacity:1; -webkit-transition : opacity 500ms ease-in;}

    #tab2:hover img,#tab2:focus img,#tab2:active img{z-index:4;background:#fff;}
    #tab2:hover .tabcontent,#tab2:focus .tabcontent,#tab2:active .tabcontent{   z-index:3;  background:#fff; opacity:1; -webkit-transition : opacity 500ms ease-in;}

如果你检查我的代码，你就会明白问题所在。请任何人帮助我解决这个问题。

Answer 1

我认为您正在寻找的选择器是 #tab1:hover > .tabcontent

尝试将 .tabcontent 更新为

.tabcontent{
    display: none;
    position: absolute;
    padding:10px 0 0 40px;
    background:#fff;
    border:1px solid #000;  
    left:0;
    top:40px;
    height:120px;
    display:block;
    margin-top:40px;
    transition: all 1.2s;
}

然后添加选择器

#tab1:hover > .tabcontent, #tab2:hover >.tabcontent
{
     display: block;
}

这是一个修复布局的 fiddle (我猜想你想要的东西如何定位)以及将 #tab1 和 #tab2 ID 和选择器更改为 .tab 以获得更好的可扩展性和需要更少的 CSS 选择器。为了简化，我删除了一些属性。 http://jsfiddle.net/DLBPF/