Jquery Div Hover改变其他Div级别 [英] Jquery Div Hover change other Div Class

问题描述

我试图让一个div在悬停在容器div上时改变它的类。看看下面的代码..结构是这样的：

  Div容器
 
顶部Div 
 
 Middle Div 
 
底部
 
（结束Div容器）
  

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

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

  <脚本> 
 $（＃fbot）。hover（
 function（）{
 $（this）.addClass（fboto）; 
} 
 
）; 
 
 
< / script> 
 
 
 
 <！ -   -  fullbox container  - > 
< div id =fbox> 
< div id =ftop>< / div> <！ -  fullbox的顶部 - > 
 
 
 
 <！ - 中间的fullbox  - > 
< div id =fmid> 
 
< / div> 
 <！ - 全部内容的结尾中间 - > 
 
 
 
< div id =fbot>< / div> <！ - 全部框的底部 - > 
< / div> 
<！ - 结束全部容器 - > 
  

解决方案

我为你扔了一个jsfiddle 这里。

正如@charliegriefer所说 - 确保你有包含jQuery和.fboto的css被定义。

我可能误解了你所问的，所以我更新了我的jsfiddle。我认为@Felix Kling是正确的 - 你只是缺少 $（function（）{...}）; - 它基本上是一个jquery onload 方法。

I'm trying to make one div change its class when hovering over its container div. See below the the code.. Structure goes like this:

Div Container

   Top Div

   Middle Div

   Bottom Div

(End Div Container)

Now What I want is when hovering over the container I want the bottom div to add the class called "fboto" which changes/adds a background image to that div.

Below is my current code using jquery however it doesn't seem to do anything.

<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 -->

解决方案

I threw together a jsfiddle for you here.

as @charliegriefer said - make sure you have jQuery included and the css for .fboto is defined.

I may have misunderstood what you were asking, so I updated my jsfiddle. I think @Felix Kling is right though - you were just missing the $(function(){...}); - which is basically a jquery onload method.

这篇关于Jquery Div Hover改变其他Div级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！