0

ページの下部に貼り付けられるフッターを使用して、ホバー時にフッターをスライドさせたいと思います。フッターを貼り付けてボタンのように動作させることができましたが、ホバー時にスライドしてフッターのコンテンツを表示しません。

ここに私のコードがあります:

<html>
<head>
<meta charset='UTF-8'>
<title>sliding footer</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

<style>
html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.slide { 
    border:1px solid black;
    width:100%; 
    height:150px; 
    display:none; 
    position:absolute;
    left: 0px;
    right:0px;
    bottom: 25px;   
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;
       left: opx;
       right: 0px;
       border:1px solid black;
       display: inline-block;
       overflow: hidden;
       cursor:pointer;
           background:#FFE4E1;
    }
</style>
</head>


<body>              

<script type="text/javascript">

 $(".footer").hover(function () {
    $(this).children('.slide').slideToggle("fast");
  });

</script>

<div class="footer" > 
    Footer Button
   <div class="slide">

    <a href="#"> footer content 1</a>
    <a href="#"> footer content 2</a>
    <a href="#"> footer content 3</a>

   </div>
</div>

</body>
</html>
4

4 に答える 4

3

JSFIDDLEに不要な css の一部を変更し、外観を少し変更しました。

JS:

 $(".footer").hover(function () {
    $(".slide").slideToggle("fast");
  });

HTML:

<div class="footer" > 
    <div class="slide">
        <a href="#"> footer content 1</a>
        <a href="#"> footer content 2</a>
        <a href="#"> footer content 3</a>
    </div>
    Footer Button   
</div>

CSS:

.slide { 
    border:1px solid black;
    height:125px;    
    left: 0px;
    right:0px;
    bottom: 25px;
    display: none;    
    position: absolute;
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;       
       left: opx;       
       right: 0px;
       border:1px solid black;
       display: inline-block;       
       cursor:pointer;
       background:#FFE4E1;       
    }
于 2013-08-08T18:19:56.707 に答える