CODEWITHSUNDEEP
jqueryhover
Lo_MAT
Lo_MAT

Reputation: 61

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. Also, I would like for it to slowly hide back in the left side of the screen.

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

Upvotes: 0

Views: 1671

Answers (1)

ahmed hamdy
ahmed hamdy

Reputation: 5169

you can use mouseover() and show() into JQuery 

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

Upvotes: 1

Related Questions