简体   繁体   English

悬停在另一个div上时如何使div出现

[英]how to make div appear when hover over another div

So for my blogpage. 所以对于我的博客页面。 I want to know if it's possible to get the #notepad div appear from the left (scroll from the left side of the screen) whenever I hover over the About Me button. 我想知道每当我将鼠标悬停在“关于我”按钮上方时,是否有可能使#notepad div从左侧出现(从屏幕左侧滚动)。 Also, I would like for it to slowly hide back in the left side of the screen. 另外,我希望它缓慢地隐藏在屏幕的左侧。

HTML: HTML:

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>


<div>
    <div id="aboutme"><span id="abtext">ABOUT ME</span></div>
<div>


<div id="notepad">
<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>

</body>
</html>

CSS: CSS:

#aboutme {position:fixed;
    top:500px;
    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/gmjef3c6m/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:380px;
           }

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

you can use mouseover() and show() into JQuery 您可以使用mouseover()show()到JQuery中

$("#aboutme").mouseover(function() {
  $("#notepad").show();
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM