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

所以我的博客页面。我想知道当我将鼠标悬停在关于我按钮上时，是否可以从左侧显示#notepad div（从屏幕左侧滚动）。另外，我想让它慢慢隐藏在屏幕的左侧。如何让div在另一个div上悬停时出现

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：

#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; 
}

来源

2013-12-23 Lo_MAT

你要哪一种div来添加'上（ “悬停” ）'去？ –

#aboutme按钮。所以当我将鼠标悬停在它上面时，大记事本将出现在屏幕左侧。我似乎无法找到合适的编码 –

我还想指出，我的#aboutme按钮上方还有另一个按钮，而另一个按钮位于其下方。我希望记事本从屏幕左侧出现，而不会碰到这些按钮。 –

可以使用mouseover()和show()到JQuery的

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

来源

2013-12-23 17:06:15

小心给我看一把小提琴，我是新来的网页设计和jQuery仍然有点让我感到困惑 –

^只是把代码放在onload函数中，然后试试 – 2013-12-23 17:09:57

你只需要加载JQuery文件， Put into tag 在使用我的代码之前 –

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

回答

相关问题