html - 悬停可见性

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>

希望这对您的问题有所帮助。