Javascript 如何使div元素反向悬停？

首先，让我们回顾一下我的代码：

HTML:

如果

.button\u container

处于悬停状态，上述代码将使

.button\u side

处于悬停状态。但是现在我想做相反的事情，这样如果

.button\u-side

悬停，它将悬停在

.button\u-container

上。我相信使用CSS会很困难，但我更喜欢它，但我对JQuery持开放态度。我该怎么做

“我还想做相反的操作，这样如果

.button\u side

悬停，它将悬停在

.button\u container

”

我相信您需要使用JS来实现这一点是正确的（对于一些jQuery来说很简单），因为CSS往往从父母到孩子，而不是相反。首先定义要使用所需设置添加的类：

然后：

$(".button_side").mouseenter(function() {
    $(this).closest(".button_container").addClass("hover");
}).mouseleave(function() {
    $(this).closest(".button_container").removeClass("hover");
});

演示：

在jQuery事件处理程序中，

this

（通常）引用事件应用到的元素，因此

$（this）

为悬停的项提供jQuery包装，并允许您使用jQuery的

.closest（）

方法通过

.button\u容器

类查找最近的祖先

请注意，我展示的JS代码需要包含在出现在相关元素之后的脚本元素中，和/或包含在文档就绪处理程序中

编辑/p.S.：请注意，在问题所示的标记中，

.button\u侧

元素实际上没有任何可悬停的内容，只有一个空的（自动关闭）

元素（因此在我的演示中，我在那里添加了一些内容，以便您可以悬停一些内容并看到它工作）

“我还想做相反的操作，这样如果

.button\u side

悬停，它将悬停在

.button\u container

”

我相信您需要使用JS来实现这一点是正确的（对于一些jQuery来说很简单），因为CSS往往从父母到孩子，而不是相反。首先定义要使用所需设置添加的类：

然后：

$(".button_side").mouseenter(function() {
    $(this).closest(".button_container").addClass("hover");
}).mouseleave(function() {
    $(this).closest(".button_container").removeClass("hover");
});

演示：

在jQuery事件处理程序中，

this

（通常）引用事件应用到的元素，因此

$（this）

为悬停的项提供jQuery包装，并允许您使用jQuery的

.closest（）

方法通过

.button\u容器

类查找最近的祖先

请注意，我展示的JS代码需要包含在出现在相关元素之后的脚本元素中，和/或包含在文档就绪处理程序中

---

编辑/p.S.：请注意，在问题所示的标记中，

.button\u侧

元素实际上没有任何可悬停的内容，只有一个空的（自动关闭）

元素（因此在我的演示中，我在那里添加了一些内容，以便您可以悬停一些内容并看到它工作）.

我认为您可以这样做（使用jQuery）：

$(document).ready(function(){

    $('.button_side').hover(function(){
        $('.button_container').addClass('hover');        
    }, function(){
        $('.button_container').removeClass('hover');
    });

});

---

如果您需要帮助，请尝试查看此信息。

我认为您可以使用jQuery执行类似操作：

$(document).ready(function(){

    $('.button_side').hover(function(){
        $('.button_container').addClass('hover');        
    }, function(){
        $('.button_container').removeClass('hover');
    });

});

---

如果你需要帮助，试着看看这个。

这不完全是你想要的，但可能有帮助

如果你不想在js上乱搞的话，有时候这是一个合适的解决方案。 另一方面，它使您的

html

和

css

代码变得凌乱。我很少在某些特殊情况下使用它（例如，对于列视图具有悬停效果，其中列的高度可以为100%，因为它应该展开行）

它不适用于较旧的IE版本，因此如果使用它，应谨慎使用

HTML

 <div class="button_container">
     <div class="inner_button">
         <a href="#" class="button_text">Button</a>
     </div>
     <div class="button_side">
         <i class="play">play</i>
         <div class="hover-fake"><div>
     </div>
 </div>

---

这不完全是你要问的问题，但可能会有所帮助

如果你不想在js上乱搞的话，有时候这是一个合适的解决方案。 另一方面，它使您的

html

和

css

代码变得凌乱。我很少在某些特殊情况下使用它（例如，对于列视图具有悬停效果，其中列的高度可以为100%，因为它应该展开行）

它不适用于较旧的IE版本，因此如果使用它，应谨慎使用

HTML

 <div class="button_container">
     <div class="inner_button">
         <a href="#" class="button_text">Button</a>
     </div>
     <div class="button_side">
         <i class="play">play</i>
         <div class="hover-fake"><div>
     </div>
 </div>

---

你能用一个屏幕截图来详细说明你想要它们的外观吗？只有当button_容器是button_侧的子容器时，css才有可能。css->cascade意味着只能从父级级联到子级。如果您不更改html，则只能使用Javascript。您可以通过屏幕截图详细说明您希望它们的外观吗？只有当button_容器是button_端的子容器时，css才有可能。css->cascade意味着只能从父级级联到子级。如果不更改html，则只能使用javascript+1。你以25秒的优势击败了我：）更好的是，你只在最近的容器上悬停。我写了我自己的答案，但这一个总结得很好。可以使用3个CSS规则（使用

：not（）

），但这会很难看，也没有必要，因此您的答案是正确的。@ramsesoriginal对于css4，您可以使用

E！>F

但我认为我们需要等待几年，直到它得到广泛支持。-我知道，这是我等待最多的功能。给我那个和以前的兄弟选择器，我很高兴。谢谢，但若我悬停按钮，它不会悬停播放。我还想让播放“play”的div放在播放“play”的div旁边。谢谢+1.你以25秒的优势击败了我：）更好的是，你只在最近的容器上悬停。我写了我自己的答案，但这一个总结得很好。可以使用3个CSS规则（使用

：not（）

），但这会很难看，也没有必要，因此您的答案是正确的。@ramsesoriginal对于css4，您可以使用

E！>F

但我认为我们需要等待几年，直到它得到广泛支持。-我知道，这是我等待最多的功能。给我那个和以前的兄弟选择器，然后

.hover-fake {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: green;
    display: none;
}

.button_container {
    position: relative;
    left: 0xp;
    top: 0px;
}

.inner_button:hover {
    background: red;
}
.button_container:hover > .button_side { 
    background-color: red !important; 
}

.button_side:hover > .hover-fake  {
    display: block;
}