Question

当我将鼠标悬停在菜单栏上时，我希望内容达到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>

Answer 1

首先，Id的名字前面有一个哈希：

ID = “Layer5”

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>

我的所有内容

Answer 2

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

$(document).ready(function(){
  $("#Layer5").mouseover(function(){
    $("#header1").fadeTo('slow', 0.5);
  })
  .mouseout(function(){
    $("#header1").fadeTo('slow', 1);
  });
});

div容器淡出不起作用

2 个答案: