html - 将鼠标悬停在图像上并在另一个 div 中显示文本

Question

我在将鼠标悬停在图像上时无法显示文本。尝试获取员工页面，员工的图像位于顶部，当您将鼠标悬停在图像上时，个人简介显示在下方。

我一直在尝试仅使用 css 来完成这项工作，但我在这方面工作的时间越长，我就越认为它需要在 jQuery 中完成。任何帮助、建议或被指向一个例子将不胜感激。

这是我的例子。 jsfiddleHTML

<div id="ourteam">
<img src="http://d1w5usc88actyi.cloudfront.net/wp-content/uploads/2013/06/1.jpg" id="cat1">
<img src="http://cdn77.eatliver.com/wp-content/uploads/2014/05/funny-glamour16.jpg" id="cat2">
<h3 align="center"> Our Cats</h3>
    <div float="left" style="width: 50%;" id="catone">test test test test</div>
    <div float="left" style="width: 50%;" id="catone">test test test test</div>
    <div float="right" style="width: 50%;"id="cattwo">test2 test2 test2 test2</div>
    <div float="right" style="width: 50%;"id="cattwo">test2 test2 test2 test2</div>

CSS

    #catone {
    display:none;
}
#cattwo {
    display:none;
}

#cat1:hover  #catone {
    display:block;
}

#cat2:hover #cattwo {
    display:block;
}

img{
    height:150px;
    width:150px;
    -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;
}

img:hover {
-webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
}

Answer 1

这是一个工作示例。我希望这就是你的意思:)

.catone {
    display:none;
}
.cattwo {
    display:none;
}
#cat1:hover ~ .catone {
    display:block;
}

#cat2:hover ~ .cattwo {
    display:block;
}

jsfiddle

您犯了一些错误...您对多个元素使用了一个 ID。看看CSS3 element1~element2 Selector