Question

所以我的博客页面。我想知道当我将鼠标悬停在“关于我”按钮上时是否可以从左侧（从屏幕左侧滚动）显示#notepad 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;
}

Answer 1

您可以将mouseover() 和show()用于JQuery

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

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

1 个答案: