Question

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

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

这是我的例子。 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;
}

Answer 1

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

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

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

jsfiddle

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

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

1 个答案: