[英]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.