Question

我正在为我的网站制作一个联系页面，并且我已经设置了这个滚动显示框，当你将鼠标悬停在每个图标上时，该显示框会发生变化。我试图让这种悬停效果发挥作用，但我似乎无法弄明白。我对下拉菜单使用了类似的效果，但这些效果很好。我希望我可以使用一个CSS效果将所有这些效果更改为＆＃34;隐藏＆＃34;然后使用悬停将它们分别更改为可见。我想知道，我是否必须为每个展示盒制作类似的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>

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

悬停可见性

1 个答案: