Question

我正在使用html，css和php制作一行图像div。我希望能够将鼠标悬停在图像上，并在下面的下一行中将其描述文本显示在单独的div（DivB）中。

这是基本结构：

<div class="pic1">Display Picture 1 here</div>
  <div class="pic2">Display Picture 2 here</div>
  <div class="pic3">Display Picture 3 here</div>
  <div class="pic4">Display Picture 4 here</div>
<div class="text-info">Description Text for all above div's displayed here on hover of above div's.</div>

换句话说：

如果我将鼠标悬停在图片1上，则在DivB中会显示图片1的说明。
如果将鼠标悬停在图像2上，则在DivB中将显示图像2的描述。
如果将鼠标悬停在图像3上，则DivB中将显示图像3的描述。
等等

参数：

如何将其作为纯CSS解决方案？
没有Jquery。
我可能需要处理多达1,000张图像，因此通过使用数组或循环之类的方法将代码最小化而不重复功能（一千次）将非常有价值。

我有一个使用Jquery和CSS作为小提琴的可行解决方案：https://jsfiddle.net/70chk8yn/

我查阅了许多CSS例子和小提琴，但没有找到足够接近的例子供我使用。

Answer 1

Here's a working fiddle

#text-info:after {
  content: "Description Text for all above div's displayed here on hover of above div's.";
}

.pic1:hover~#text-info:after {
  content: 'The description for picture 1.';
}

.pic2:hover~#text-info:after {
  content: 'Picture 2 description.';
}

.pic3:hover~#text-info:after {
  content: 'The description for picture 3.';
}

.pic4:hover~#text-info:after {
  content: "Picture 4's description.";
}

Answer 2

无法使用CSS仅对一长串图像和说明进行操作，而又不会使代码变长。

因此，您可以在p内设置每个描述，并使hover中的每个images在描述p中显示不同的div：< / p>

HTML

<div class="pic">Display Picture 1 here</div>
<div class="pic">Display Picture 2 here</div>
<div class="pic">Display Picture 3 here</div>
<div class="pic">Display Picture 4 here</div>
<div class="text-info">
  <p>Description 1</p>
  <p>Description 2</p>
  <p>Description 3</p>
  <p>Description 4</p>
</div>

CSS

.pic {
  height: 30px;
  width: 200px;
  border: 1px solid grey;
}    
.pic:hover {
  background-color: grey;
}
.text-info {
  height: 50px;
  width: 400px;
  border: 1px solid grey;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
}
.text-info p {
  display: none;
}
.pic:nth-of-type(1):hover ~ .text-info p:nth-of-type(1),
.pic:nth-of-type(2):hover ~ .text-info p:nth-of-type(2),
.pic:nth-of-type(3):hover ~ .text-info p:nth-of-type(3),
.pic:nth-of-type(4):hover ~ .text-info p:nth-of-type(4)
{
  display: block;
}

现在的问题是：如何在CSS中多次重复此操作以获取大量图像和说明？

好吧，在这种情况下，您可以使用PHP，JavaScript或类似CSS preprocessor的{{1}}来创建SASS。
您只需要重复style多次，其中.pic:nth-of-type(n):hover ~ .text-info p:nth-of-type(n)从1开始，最后的n将是您拥有的图像的n。

例如，您有3张图片（和3个描述），呈现的length将是：

CSS

希望对您有帮助。

Answer 3

function  pic(x){
    document.querySelector(".txt-info").innerHTML=x.innerHTML;
}

.txt-info {
            height: 50px;
            width: 400px;
            border: 1px solid grey;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 6px;
            }
        
        .pic{
            height: 30px;
            width: 200px;
            border: 1px solid grey;
        }
        
        .pic:hover{
            background-color: grey;
        }

<body>
    
    <div class="pic" onmouseover="pic(this)">Display Picture 1 here </div>
    <div class="pic" onmouseover="pic(this)">Display Picture 2 here</div>
    <div class="pic" onmouseover="pic(this)">Display Picture 3 here</div>
    <div class="pic" onmouseover="pic(this)">Display Picture 4 here</div>
    <div class="txt-info"> Description Text for all above div's displayed here on hover of above div's.</div>
</body>

您只需要对所有具有内容的div使用一个类.pic和onmouseover =“ pic（this）”，并使用另一个.txt-info类在公共div中显示所有内容（没有jquery而不是css）

仅使用css将鼠标悬停在其他div上时，是否可以更改目标div的文本？

3 个答案: