將鼠標懸停在圖像上並在另一個div中顯示文字

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