Question

首先，我们来看看我的代码：

HTML：

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

CSS：

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

如果.button_side悬停，上面的代码会让.button_container悬停。但现在我也想反过来，所以如果.button_side悬停，它将悬停.button_container。我相信使用CSS会很困难，但我更喜欢它，但我对JQuery中的某些东西持开放态度。我怎么能这样做？

Answer 1

“我也想反过来，所以如果.button_side悬停，它会悬停.button_container”

我相信你对于需要使用JS（使用一些jQuery很容易）是正确的，因为CSS倾向于从父母到孩子，而不是相反。首先使用所需的设置定义要添加的类：

.hover {
    background : red;
}

然后：

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

演示：http://jsfiddle.net/PxQCT/

在jQuery事件处理程序中，this（通常）引用事件所应用的元素，因此$(this)为您提供了一个jQuery包装器，允许您使用jQuery的{{1}使用.closest()类找到最近的祖先的方法。

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

EDIT / PS：请注意，在问题中显示的标记中，.button_container元素实际上没有任何可暂停的内容，只是一个空的（自闭）.button_side元素（所以我的演示我在那里添加了一些内容，以便您可以将鼠标悬停在其上并看到它正常工作。

Answer 2

这不是你要求的，但可能有帮助。

如果你不想把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>

<强> CSS

.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;
}

<强> JSFiddle

Answer 3

我认为你可以做这样的事情（使用jQuery）：

$(document).ready(function(){

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

});

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

如何使div元素反向悬停？

3 个答案: