3

当我将鼠标悬停在图像上时，我想更改文本，但我无法解决这个问题。这个问题让我抓狂。每张图片都有不同的文字。将鼠标悬停在图像上时，该图像的文本将显示在文本框中。为了描述该主题，我在这里提供了一张图片：请参阅此链接上的图片

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

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

4

1 回答 1

2

我认为您正在寻找的选择器是#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;
}

这是一个修复布局的小提琴（我猜你想要的东西如何定位）以及更改ID 和选择器以#tab1实现更好的可伸缩性并需要更少的 CSS 选择器。为了简化，我删除了一些属性。 http://jsfiddle.net/DLBPF/#tab2.tab

于 2013-04-17T17:01:50.410 回答