Question

我正在尝试编写一个类似于this website的垂直菜单。悬停时，垂直菜单应略微移动到右侧，并应显示子菜单。

我未能做到这一点。请帮帮我:(

<html>
   <head>
   <title></title>
<style>
   .apear
   {
   width:200px;
   height:300px;
   background-color:pink;
   float:right;
   display:none;
   }
  .one
  {
   background-color:yellow;
   height:100px;
   width:100px
   }
  .two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>

Answer 1

这是解决方案，我使用了JQuery：

HTML：

<div>
<div class="apear">
</div>

<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>

CSS：

.apear
{
  width:200px;
  height:300px;
  background-color:pink;
  float:right;
  display:none;
}
.one
{
  background-color:yellow;
  height:100px;
  width:100px
}
.two
{
  background-color:blue;
  height:100px;
  width:100px
}
.three
{
  background-color:green;
  height:100px;
  width:100px
}

JQuery的：

$(document).ready(function(){
    $(".one").mouseenter(function(){
        $(".apear").show(500);
    });
  $(".apear").mouseleave(function(){
        $(".apear").hide(500);
    });
});

这是fiddle

垂直移动菜单并显示子菜单

1 个答案: