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

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

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

1 个答案: