Question

这是我之前的问题Fade in/out js mouseover event的后续内容。

我希望在我的页面上的小菜单上加入div鼠标悬停效果。我之前的问题解决了这个问题，但是我没有将页面布局合并到函数中，现在已经停止了它的工作。

我的基本代码是：

<style type="text/css">
 .hidden{
    display:none;
}

#container {
   margin: 0%;
   padding: 0;
   width: 100%;
   background-color: #222222;
}
#left, #right {
   float: left;
   margin: 0% 0 0% 0%;
   padding: 0%;
   background-color: #000;
}
#right {
   float: right;
   margin: 0% 0% 0% 0;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}
</style>

<script type="text/javascript">
oldSelected = "home"
$ (document).ready(function(){
  $ ("#products img").mouseover(function(){
    $ (".description").stop(true, true);
    var newSelected = $(this).attr("alt");
    $ ("#" + oldSelected).fadeOut('normal',function(){
      $ ("#" + newSelected).fadeIn();
    });
    oldSelected = newSelected
  });
});
</script>

<body>
<div id="container" style="width: 974px; height: 200px;">

<div id="left" style="width: 200px; height: 200px;">
<div id="products" >

<img src="home.png" alt="home" />

<img src="services.png" alt="services" /> 

<img src="contact.png" alt="contact" /> 

</div>

</div>

<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
 .. content .. 
</div>

<div class="description" id="services">
 .. content .. 
</div>

<div class="description" id="contact">
 .. content .. 
</div>
</div>

</div>

我认为由于产品和描述div在新div下重新定位，鼠标悬停效果已停止工作。

如何在此布局下调整代码以使功能再次运行？它会在表格布局中工作吗？

Answer 1

您可以尝试.slideDown和.slideUp

或.show（）。hide（），持续时间

在鼠标悬停时淡入div

1 个答案: