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

I'm having trouble with having text appear when hovering over images. Trying to get get an employee page, with the images of employees on the top, and when you hover over the image, the bio displays below.

将鼠标悬停在图像上时出现问题我遇到了麻烦。尝试获取员工页面,员工的图像位于顶部,当您将鼠标悬停在图像上时,生物显示在下方。

I've been trying to make this work with just css, but the longer I work on this the more I'm thinking it needs to be done in jQuery. Any help, suggestions or being pointed to an example would be much appreciated.

我一直试图用css来完成这个工作,但是我工作的时间越长,我认为它需要在jQuery中完成。任何帮助,建议或指向一个例子将非常感激。

Here is my example. jsfiddle HTML

这是我的例子。 jsfiddle HTML

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

1 个解决方案

#1

Here is a working example. I hope this is what you mean :)

这是一个有效的例子。我希望这就是你的意思:)

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

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

jsfiddle

You make some mistakes... you used one ID for more than one element. And take a look at CSS3 element1~element2 Selector

你犯了一些错误......你为一个以上的元素使用了一个ID。并看看CSS3 element1~element2选择器

#1