Home/ Questions/Q 3672696
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T02:38:27+00:00

good night: I want to mouse over .slide show the #panel , then click

  • 0

good night: I want to mouse over .slide show the #panel, then click the .close display the #panel, who can correct my code? thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".slide").mouseover(function(){
        $("#panel").slideToggle("slow");
    });
    $(".close").click(function(){
        $("#panel").slideToggle("slow");
    });      
});
</script>
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 1024px;
    height:100%;
}
#wrap {position:absolute;bottom:0px;}
#panel {
    background: #f60;
    width:600px;
    height: 200px;
    display: none;  
}
.slide {
    width:600px;
    height: 20px;
    background-color:#F06;
}
.close{float:right;height:20px;width:20px;background-color:#000;}
</style>
</head>
<body>
<div id="wrap">
<div class="slide">&nbsp;<div class="close">&nbsp;</div></div>
<div id="panel">
    <!-- some content -->
</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think you should use slideToggle in this case since it doesn’t seem like .slide and .close are ever hidden

    $(".slide").mouseover(function(){
    $("#panel").slideDown("slow");
});
$(".close").click(function(){
    $("#panel").slideUp("slow");
});

    Also, this will NEVER work until you move the .close div into the #panel since .close is a child of .slide and will trigger the .slide moveover event when you try to click .close

    <div id="wrap">
    <div class="slide">&nbsp;</div>
    <div id="panel">
        <div class="close">&nbsp;</div>
        <!-- some content -->
    </div>
</div>

    An example: http://jsfiddle.net/MAYag/

    • 0