Jquery Div Hover 更改其他 Div 类

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。

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

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

Answer 2

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

$(document).ready(function () {

}

见下面的html代码：

<label>Main Text</label>

<div id="name1"><h1>Heading</h1></div>

<div id="name2"><p>Body</p></div>

<div id="name3"><p>Footer</p></div>

 

</div>

 

<script language="javascript"
type="text/javascript">

   
$(document).ready(function () {

       
$("#name1").mouseover(

           
function () {

               
$(this).addClass("container1Red");

           
}

        
);

 

 

       
$("#name2").hover(

           
function () {

               
$(this).addClass("container1White");

           
}

        
);

 

 

 

 

 

       
var name3FlipFlop =
true;

       
$("#name3").mouseover(

 

           
function () {

               
if (name3FlipFlop ==
true) {

                   
$("#container1").removeClass("containerWhite");

                   
$("#container1").addClass("container1Black");

                   
name3FlipFlop = false;

               
}

               
else {

                   
$("#container1").removeClass("container1Black");

                   
$("#container1").addClass("containerWhite");

                   
name3FlipFlop = true;

 

               
}

           
}

        
);

 

 

 

 

 

    });

</script>

Answer 3

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

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

（阅读有关 .ready() 函数——我只是介绍了一个常用的快捷方式）

此外，您还说您希望在其容器 div 悬停时向页脚添加一个类。那么如果悬停在“top div”上，该类也会被添加吗？如果是这样，请在容器 div 上调用 hover：

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

如果没有，您可以使用 鼠标悬停和鼠标移出 events:

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

更新：

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

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

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

Update2: 除此之外，margin、width 等在两种样式中完全相同，尽管背景图像具有不同的名称，图像本身完全相同（此处 和此处）。
因此，如果您正确执行所有操作，您就不会看到差异！