1

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

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 中的某些东西持开放态度。我怎样才能做到这一点？

4

3 回答 3

4

“我也想做相反的事情，这样如果.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 的.closest()方法来查找与.button_container该类最近的祖先。

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

编辑/ PS：请注意，在您的标记中，如问题所示，该.button_side元素实际上没有任何可悬停的内容，只是一个空的（自关闭）<i>元素（所以在我的演示中，我在那里添加了一些内容，以便您可以拥有一些东西将鼠标悬停在上面并查看它是否正常工作）。

于 2013-09-19T13:52:40.610 回答
1

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

如果您不想过多地使用 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

于 2013-09-19T14:13:17.863 回答
0

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

$(document).ready(function(){

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

});

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

于 2013-09-19T13:57:30.233 回答