Question

我试图编写一个顶级导航栏，只有在使用jQuery hover（）悬停在页面顶部时才会出现。我已经让它成功地工作但它只在我悬停在导航栏的左侧时才有效，页面右侧没有任何反应。当我检查元素时，顶部栏水平覆盖整个页面。任何想法为什么会这样？代码如下：

<div class="desktop-display">
    <div id="navigation-wrapper" class="navigation-wrapper">
        <header class="main-header" role="banner">
            <div class="row">
                <div class="col-md-4">
                    <a href="#">LINK</a>
                    <a href="#">LINK</a>  
                </div>
                <div class="col-md-4">
                    <img src="logo.jpg">
                </div>
                <div class="col-md-4">
                    <a href="#">LINK</a>
                    <a href="#">LINK</a> 
                </div>
            </div>
        </header>
    </div>
</div>

jQuery的：

jQuery(document).ready(function(){
    jQuery( "#navigation-wrapper" ).hover(
        function() {
            $( this ).addClass( "nav-hover" );
        }, function() {
            $( this ).removeClass( "nav-hover" );
        }
    );
});

CSS：

.nav-hover {
    background-color:white;
    margin-bottom:79px;
}

.nav-hover .navigation a {
    color:black;
}

Answer 1

只需尝试 Demo

我刚做了一些改动，

<强> CSS

.nav-hover .navigation a {
    color:black;
}

您的HTML代码中没有任何“.navigation”类。所以链接没有变黑。
所以只需在行中添加“.navigation”类。

休息你只需检查代码是否适合你。然后使用它。

<div class="row navigation">
    <div class="col-md-4"> 
        <a href="#">LINK</a>
        <a href="#">LINK</a> 
    </div>
    <div class="col-md-4">
        <img src="logo.jpg">
    </div>
    <div class="col-md-4">
        <a href="#">LINK</a>
        <a href="#">LINK</a> 
    </div>
</div>

jQuery只悬停在div的左侧

1 个答案: