0

当我将鼠标悬停在菜单栏上时，我希望内容达到 50%。无论出于何种原因，我都没有完成它。我在只有 2 个 div 的测试页面上完成了它。一旦我有更多的div，它就不起作用了。为什么不？？？我指的页面是http://www.guntmarwolff.com/eigenschaftenv.php

预先感谢您的帮助！ 

    $(document).ready(function(){

      $("Layer5").mouseover(function(){
          $("header1").fadeTo('slow', 0.5);
      });

      $("Layer5").mouseout(function(){
          $("header1").fadeTo('slow', 1);
      });
  });

</script>


<div id="Layer5">
    <div style="position:relative; top:125px; left:480px; font-size:50px; z-index:1000;"><ul class="topmenu" id="css3menu1" name="css3menu1">
    <li class="topfirst"><a href="http://www.xy.com" style="height:26px;line-height:26px;">Home</a></li>
    <li class="topmenu"><a href="#" style="height:26px;line-height:26px;"><span>Info</span></a>


<div id="container1">
<div id="header1" class="header1">
  <div class="navbar1" style="position:relative;top:0px;left:-40px;z-index:1200px; id="about"><img src="headeigenschaftendeserfolgs.png" border="0"/></div>
  <p>
<p>

4

2 回答 2

1

首先，ID 在其名称前有一个哈希：

id="第5层"

css

#Layer5 {}

js (jquery)

$("#Layer5");

修复了，你应该对你的html进行排序。这对我有用：

 $(document).ready(function(){

  $("#Layer5 li a").hover( function() {
       console.log("in");
      $("#header1").fadeTo('slow', 0.5);
      }, 
  function () {
      console.log("out");
      $("#header1").fadeTo('slow', 1);
});

});

<div id="Layer5">
<div style="position:relative; top: 0px; left:80px; font-size:50px; z-index:1000;">
    <ul class="topmenu" id="css3menu1" name="css3menu1">
        <li class="topfirst"><a href="http://www.xy.com" style="height:26px;line-height:26px;">Home</a></li>
        <li class="topmenu"><a href="#" style="height:26px;line-height:26px;"><span>Info</span></a></li>
    </ul>
</div>

我所有的内容

于 2012-12-08T01:52:29.850 回答
0

与原帖有点偏离主题，但 JQuery 的优点之一是能够轻松地将多个事件链接在一起。

$(document).ready(function(){
  $("#Layer5").mouseover(function(){
    $("#header1").fadeTo('slow', 0.5);
  })
  .mouseout(function(){
    $("#header1").fadeTo('slow', 1);
  });
});
于 2012-12-08T02:02:13.850 回答