Jquery Div Hover改变其他Div Class

Question

当我将鼠标悬停在其容器div上时，我正试图让一个div改变它的类。请参阅下面的代码..结构如下：

Div Container

   Top Div

   Middle Div

   Bottom Div

(End Div Container)

现在我想要的是当悬停在容器上时我希望底部div添加名为“fboto”的类，它将背景图像更改/添加到该div。

下面是我使用jquery的当前代码，但它似乎没有做任何事情。

<script>
$("#fbot").hover(
  function () {
    $(this).addClass("fboto");
  }

);


</script>



<!-- fullbox container -->
<div id="fbox">
<div id="ftop"></div> <!-- top of fullbox -->



<!-- middle of fullbox -->
<div id="fmid">

</div>
<!-- end middle of fullbox -->



<div id="fbot"></div> <!-- bottom of fullbox -->
</div>
<!-- end fullbox container -->

Answer 1

我为你准备了一个jsfiddle here。

正如@charliegriefer所说 - 确保你已经包含了jQuery并定义了.fboto的css。

我可能误解了你的要求，所以我更新了我的jsfiddle。我认为@Felix Kling是正确的 - 你只是错过了$(function(){...}); - 这基本上是一个jquery onload方法。

Answer 2

您必须将jQuery代码放入$(function() {...})，以便在加载整个DOM之后执行。您可能还希望在悬停后删除该类：

$(function() {
    $("#fbot").hover(function () {
        $(this).addClass("fboto");
    },
    function () {
        $(this).removeClass("fboto");
    });
});

（阅读.ready()函数 - 我刚刚提供了一个常用的快捷方式）

此外，您说要在其容器 div悬停时向页脚添加一个类。如果＆＃34; top div＆＃34;徘徊？如果是这样，请在容器div上调用hover：

$("#fbox").hover(function () {
    $("#fbot").addClass("fboto");
},
function () {
    $("#fbot").removeClass("fboto");
});

如果没有，您可以使用mouseover和mouseout事件：

$("#fbox").mouseover(function(e) {
    if(e.target == this) {
        $("#fbot").addClass("fboto");
    }
}).mouseout(function(e) {
    if(e.target == this) {
        $("#fbot").removeClass('fboto');
    }
});

<强>更新

似乎浏览器不应用类fboto中定义的样式。

我认为这是因为ID选择器的优先级高于类选择器（因为它更具体）。尝试将CS​​S更改为：

#fbot.fboto {
   /*...*/
}

Update2：除此之外，margin，width等两种风格完全相同，虽然背景图片的名称不同，但图片本身完全相同（here和here） 如果您正确地做了所有事情，那么您就不会发现任何差异！

Answer 3

基本上一切都需要进入文档就绪功能。此外，如果您使用悬停，您可能需要使用前置。请注意，这是一个完全有效的示例。

$（document）.ready（function（）{

}

见下面的html代码：

＆lt; div id =“container1”class =“container1White”＆gt;

             ＆lt; label＆gt;主要文字＆lt; / label＆gt;

             ＆lt; div id =“name1”＆gt;＆lt; h1＆gt; Heading＆lt; / h1＆gt;＆lt; / div＆gt;

             ＆lt; div id =“name2”＆gt;＆lt; p＆gt; Body＆lt; / p＆gt;＆lt; / div＆gt;

             ＆lt; div id =“name3”＆gt;＆lt; p＆gt;页脚＆lt; / p＆gt;＆lt; / div＆gt;

             

             ＆LT; / DIV＆GT;

             

             ＆lt; script language =“javascript”         类型= “文本/ JavaScript的” ＆GT;

                      $（document）.ready（function（）{

                      $（ “＃名称1”）。鼠标悬停（

                      function（）{

                      $（本）.addClass（ “container1Red”）;

                      }

                      ）;

             

             

                      $（ “＃NAME2”）。悬停（

                      function（）{

                      $（本）.addClass（ “container1White”）;

                      }

                      ）;

             

             

             

             

             

                      var name3FlipFlop =         真;

                      $（ “＃NAME3”）。鼠标悬停（

             

                      function（）{

                      if（name3FlipFlop ==         真）{

                      $（ “＃container1”）removeClass（ “containerWhite”）;

                      $（ “＃container1”）addClass（ “container1Black”）;

                      name3FlipFlop = false;

                      }

                      否则{

                      $（ “＃container1”）removeClass（ “container1Black”）;

                      $（ “＃container1”）addClass（ “containerWhite”）;

                      name3FlipFlop = true;

             

                      }

                      }

                      ）;

             

             

             

             

             

             }）;

             ＆LT; /脚本＆GT;