Question

基本上，我希望只要我将鼠标悬停在#about me div上，就会出现#notepad div。我已经解决了这个问题。现在我的下一个问题是，当#notepad出现时，它不会浮动在div上。某些div与#notepad div重叠。简而言之，如何使#notepad div显示在其他div上。当我没有悬停在#aboutme div上时，我希望#notepad div隐藏起来。

        <div id="picture">
            <img src="http://m.c.lnkd.licdn.com/media/p/3/005/02c/2e1/0373b9e.jpg"                    height="80" width="80" id="linkimg"/>
    </div>

    <div>
        <div id="aboutme"><span id="abtext">ABOUT ME</span></div>
    <div>
    <div id="notepad" style="display:none">
        <p>
            <ul>
            <li>Guitar Aficionado</li>
            <li>Travel Enthusiast</li>
            <li>Aspiring Entrepreneur</li>
            <li>Fitness Fanatic</li>
            <li>Web Geek</li>
            <li>Avid Writer</li>
            <li>Avid Reader</li>
            </ul>
        </p>
    </div>




    <div>
        <a href="http://www.linkedin.com/in/lorenzomatibag/">
        <img src="http://www.sugarspunmarketing.com/wp-content/uploads/2013/08/Linkedin-logo-icon.png" id="linkedin"></a>
    </div>

    <div id="gmail">
    <a href="mailto:lorenzo0526@gmail.com" id="email" style="margin-left:6px>EMAIL</a>                  
    </div>

<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_wtthout_text_md.png" height="23" width="23"class="button">
            </form>
        </div>
    </div>

CSS：

#aboutme {position:fixed;
top:110px;
left:14px;
border: 2px solid black;
border-radius:10px;
background-color:#494545;
height:30px;
width:133px;
opacity:.5
}
#aboutme:hover {
opacity:1.0;
filter:alpha(opacity=100); 
}

#abtext {position:relative;
top:2px;
font-family:Broadway;
font-size:22px;
padding-left:3px;
color:white;
}

#notepad{background:url(http://s25.postimg.org/6cgzfumb1/lined_paper_by_LL_stock.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border: 2px solid black;
    border-radius:10px;
    position:relative;
    height:380px;
    width:360px;
       }

ul {
font-family:Comic Sans MS;
font-size:28px;
list-style-type: none;
}

#picture {background-color:black;
background-size: cover;
height: 86px;
position:fixed;
top: 14px;
left: 14px;
border-style:dashed; 
border-color: #2E2E2E;
border-radius: 10px;
opacity:1;
filter:alpha(opacity=40);
word-wrap: break-word;
width: 133px;
color:#8A0808;
}
#linkimg {position:relative;
top:1px;
left:1px;
border:2px solid black;
border-radius: 10px;
}

#linkedin {position: fixed;
    top: 18px;
    left: 104px;
    width:40px;
    height: 40px;
    opacity:.7;
    border:2px solid black;
    border-radius:10px;
    filter:alpha(opacity=40);
    }

#linkedin:hover
{
opacity:1.0;
filter:alpha(opacity=100); 
}

#gmail {background-color:#880303;
    border-radius:10px;
    border:4px solid #6E6E6E;
    text-align:center;
    letter-spacing:10px;
    position: fixed;
    top: 147px;
    left: 14px;
    width: 133px;
    height: 25px;
    opacity:.6;
    filter:alpha(opacity=40);
    }
#gmail:hover
{
opacity:1.0;
filter:alpha(opacity=100); 
}
#email {
text-decoration: none;
color: White;
font-size:18px;
font-family:Showcard Gothic;}

.search{position:fixed;
    height:32px;
    width:138px;
    top:183px;
    left:14px;
    border:1px solid black;
    background-color:black;
    border-radius:10px;
    opacity:.8;}
.search_text{position:relative;
    bottom:2px;
    width:99px;
    left:1px;
-moz-border-radius: 15px;
border-radius: 8px;
border:solid 1px black;
padding:5px; 
text-align:center;
}
.button{position:relative;
    top:6px;
    right:3px;}

jQuery的：

$(document).ready(function() {
$('#NEW').delay(250).fadeIn(1000);
$('#MEDIA').delay(850).fadeIn(1000);
$('#NEWB').delay(1600).fadeIn(1000);
$("#aboutme").mouseover(function() {
$("#notepad").show('slow');
});
});

Answer 1

您需要设置每个div的z-index。这将设置每个的深度，并允许您相应地分层

http://www.w3schools.com/cssref/pr_pos_z-index.asp

当鼠标悬停在div上时div重叠

1 个答案: