0

I don't know why nothing is happening when I mouse over the div. I may have an issue with how I linked the javascript files, but I looked this up and from what I found, am doing that correctly. On top of that, I couldn't find any other help for my problem.

HTML

<html>
<head>
<title>
    Title
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>  
<script type = "text/javascript" src = "script.js"></script>
</head>
<body>

    <div class="menu">Hi</div>
</body>
</html>

CSS

body
{
    background-color: #CCFFFF;
}
.menu
{
    background-color: #666666;
    position: relative;
    top: 0;
    margin: auto;
    text-align: center;
    width: 70px;
    height: 30px;
    font-color: white;
    border-radius: 5px;
}

Javascript

$(document).ready(function(){
    $('div:nth-child(1)').mouseover(function(){
        $('div:nth-child(1)').slideDown('slow');
    });
});
3
  • what's the console output mate? If you think you have mislinked the jQuery file, try <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> in place of your <script src="jquery.js" type="text/javascript"></script> May 29, 2014 at 2:25
  • 1
    What are you expecting it to do, and what is it doing differently from that?
    – Barmar
    May 29, 2014 at 2:30
  • @AkiraDawson I tried that and it didn't work. I'm still not sure why.
    – dj0965
    May 29, 2014 at 2:33

3 Answers 3

3

The accepted answer will not work if you are trying to achieve an invisible div that can stil be moused over. slideDown, only works on a div with display: none not visibility:hidden but if you set your div to display:none then you can't mouse over it. One way to have an invisible div that you can still mouse over is to wrap it in another div like this:

<body>
    <div id="contain">
        <div class="menu">Hi</div>
    </div>
</body>

Then you execute this function:

$(document).ready(function(){
    $('#contain').on({
        mouseenter: function(){
            $('.menu').slideDown('slow');
        }, mouseleave: function() {
            $('.menu').slideUp('slow');        
        }
    });
});

Demo

2

slideDown works on elements that are hidden, and then exposes them. You have a div that is showing, and on mouseover expect it to slide down? (No sense!) - Apply the slidedown effect to an element that is hidden and it will work.

0

Oh,you misunderstood function slideDown(),it displays the matched (hidden) elements with a sliding motion.The div is visible,you should hide it first,then you can use slideDown() to display it.

<html>
<head>
<title>
    Title
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>  
<script>
    $(document).ready(function(){
        $('div:nth-child(1)').mouseover(function(){
            $('div:nth-child(1)').slideUp('slow');
        });

        $('button').click(function(){
            $('div:nth-child(1)').slideDown('slow');
        });
});
</script>
</head>
<body>
    <div class="menu">Hi</div>
    <button>show</button>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.