Hover Visibility

Question

Я создаю контактную страницу для своего сайта, и я установил эту панель отображения прокрутки, которая должна изменяться, когда вы наводите курсор на каждый значок. Я пытался заставить этот эффект зависания работать, но я не могу понять, как это понять. Я использовал аналогичный эффект для выпадающих меню, но они отлично работают. Я надеялся, что смогу использовать один эффект CSS, чтобы изменить все их на «скрытые», а затем изменить их на видимые отдельно с помощью наведения. Мне интересно, мне нужно будет сделать аналогичный эффект CSS для каждого окна дисплея?

<div id="main"> 
     <div id="icons"> 
      <img id="Email" title="Email" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/iconemail.png"> 
      <img id="Facebook" title="Facebook" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/iconfacebook.png"> 
      <img id="Twitter" title="Twitter" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/icontwitter.png"> 
      <img id="Linkedin" title="Linkedin" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/iconlinkedin.png"> 
      <img id="Portfolio" title="Portfolio" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/iconportfolio.png"> 
      <img id="iPhone" title="Phone" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/iconphone.png"> 
      <img id="iHome" title="Home Address" src="http://i813.photobucket.com/albums/zz56/mattboy115/Website%20Images/iconhome.png"> 
     </div> 
     <div id="display"><p>Hover Over the Icons for Information</p> 
      <div id="email"></div> 
      <div id="facebook"></div> 
      <div id="twitter"></div> 
      <div id="linkedin"></div> 
      <div id="portfolio"></div> 
      <div id="phone"></div> 
      <div id="home"></div> 
     </div> 
    </div> 

CSS

#main { 
    position: relative; 
    top: 40px; 
    margin: 0 auto; 
    background: rgba(255,255,255,0.5); 
    padding: 40px; 
    width: 1000px; 
    height: 1000px; 
    border-radius: 2px; 
} 
#icons{ 
    width: 30%; 
    height: 1009px; 
    background: #333333; 
    position: relative; 
    margin: 0 auto; 
    float: left; 
    display: inline; 
    border: black solid 5px; 
} 
#icons img { 
    height: 125px; 
    border-radius: 100px; 
    border: solid black 5px; 
    margin: 0 auto; 
    vertical-align: middle; 
    position: relative; 
    display: block; 
    margin-top: 08px; 

} 
#display { 
    width: 52%; 
    height: 350px; 
    background: #333333; 
    position: relative; 
    float: left; 
    position: fixed; 
    display: inline; 
    border-bottom-right-radius: 12px; 
    border-top-right-radius: 12px; 
    border: solid black 5px; 
    border-left: none; 
    margin-left: -5px; 
    z-index: 1; 
} 
p { 
    margin: 0 auto; 
    color: white; 
    font-family: 'Oswald', sans-serif; 
    font-size: 20px; 
    text-align: center; 
    margin-top: 160px; 
} 
#display div { 
    width: 52%; 
    height: 350px; 
    background: #333333; 
    float: left; 
    position: fixed; 
    display: inline; 
    border-bottom-right-radius: 12px; 
    border-top-right-radius: 12px; 
    border: solid black 5px; 
    border-left: none; 
    margin-top: -195px; 
    z-index: 1; 
    visibility: hidden; 
} 
#email:hover #Email { 
    visibility: visible; 
} 

Answer 1

Я чувствую, что ваш вопрос немного неоднозначным. Кажется, что вы хотите отображать информацию, когда определенный контент зависает. Вот пример кода, который вы могли бы использовать для такого действия, он был упрощен из вашего примера для ясности.

CSS

@CHARSET "UTF-8"; 

/* Hides every instance that has the class hideMe within the container */ 
#container .hideMe { 
    display: none; 
} 

/* Only displays the HTML that contains the class 'eMail' within the container */ 
#container .displayMail:hover+.eMail { 
    display: block; 
    /* Additional styling can be placed here for when it is visible */ 
} 

HTML

<div id="container"> 
    <a class="displayMail">Display e-Mail</a> 
    <div class="hideMe eMail">Information for e-mail should be displayed here.</div> 
</div> 

Я надеюсь, что это поможет с вашей проблемой.