jquery - 我试图在悬停菜单的一个特定子项时更改菜单 css 样式。不熟悉 jQuery

标签 jquery html css menu tumblr

jQuery 似乎是可行的方法，所以也许你们可以告诉我如何实现我想要的东西。我正在为 tumblr 网站创建一个下拉菜单。我现在几乎完成了，但是:当下拉菜单展开时，Tumblr 帖子不会下降，事实上，即使 z 轴 = 1，我的菜单也会留在帖子后面。解决方案很简单，如果将鼠标悬停在整个菜单上，在菜单下方添加一些边距，但是当我将鼠标悬停在没有子菜单的子菜单上时也会发生这种情况。 为了让它看起来更好看，我想在整个菜单上添加边距，就在悬停有 child 的 child 时 (class="aboutus")。这不能通过 CSS 完成，我知道，但几乎不知道 jQuery。我猜这可能并不困难，但是......

我不是这方面的专家，事实上，我大约在 2 周前开始学习 html 和 css，因此非常感谢您的帮助。

HTML

<div class="menu-wrap">
<nav class="menu">
    <ul class="clearfix">
        <li class="twitter"><a href="https://twitter.com/correocaminos">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li class="aboutus">
            <a href="/aboutus">SOBRE NOSOTROS&nbsp;<span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
                <li><a href="/asociacioncultural">ASOCIACIÓN CULTURAL</a></li>
                <li><a href="/equipo">EQUIPO</a></li>
            </ul>
        </li>
        <li><a href="/revista">LA REVISTA</a></li>
        <li><a href="/unete">ÚNETE</a></li>
        <li class="issuu"><a href="https://issuu.com/correocacultural">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
</nav>
</div>

CSS

.clearfix:after {
display:block;
clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}

.menu {
    width:100%;

}

.menu:hover {
    margin:0 0 70px 0;
}

.menu li {
    margin:0 auto;
    list-style:none;
    font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
    font-weight: {TitleFontWeight};
}

.menu a {
    transition:all linear 0.15s;
    color: {AccentColor};
    text-decoration: none;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
}

.menu .arrow {
    font-size:15px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline;
    position:relative;
    font-size:20px;
    z-index: 1;
}

.menu > ul > li > a {
    padding:10px 20px;
    display:inline-block;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:{AccentColor};
    color: {TitleColor};
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:26px;
    left:0px;
    z-index:1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}

.sub-menu li {
    display:block;
    font-size:18px;
}

.sub-menu li a {
    padding:10px 20px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:{AccentColor};
    color: {TitleColor};
}
.twitter {
    background-image: url('http://i.imgur.com/g5BqVFr.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .twitter:hover > a {
    background-image: url('http://i.imgur.com/1IVH284.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.issuu {
    background-image: url('http://i.imgur.com/NsM9xT2.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .issuu:hover > a {
    background-image: url('http://i.imgur.com/kbGIHN4.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}

编辑:网页如下:http://correocaminos.tumblr.com 

    .clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}
 
.menu {
    width:100%;
    
}

.menu:hover {
    margin:0 0 70px 0;
}
 
.menu li {
    margin:0 auto;
    list-style:none;
    font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
    font-weight: {TitleFontWeight};
}
 
.menu a {
    transition:all linear 0.15s;
    color: {AccentColor};
    text-decoration: none;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
}
 
.menu .arrow {
    font-size:15px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline;
    position:relative;
    font-size:20px;
    z-index: 1;
}
 
.menu > ul > li > a {
    padding:10px 20px;
    display:inline-block;
}
 
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:{AccentColor};
    color: {TitleColor};
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:26px;
    left:0px;
    z-index:1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}
 
.sub-menu li {
    display:block;
    font-size:18px;
}
 
.sub-menu li a {
    padding:10px 20px;
    display:block;
}
 
.sub-menu li a:hover, .sub-menu .current-item a {
    background:{AccentColor};
    color: {TitleColor};
}
.twitter {
    background-image: url('http://i.imgur.com/g5BqVFr.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .twitter:hover > a {
    background-image: url('http://i.imgur.com/1IVH284.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.issuu {
    background-image: url('http://i.imgur.com/NsM9xT2.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .issuu:hover > a {
    background-image: url('http://i.imgur.com/kbGIHN4.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="twitter"><a href="https://twitter.com/correocaminos">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
            <li class="aboutus">
                <a href="/aboutus">SOBRE NOSOTROS&nbsp;<span class="arrow">&#9660;</span></a>
 
                <ul class="sub-menu">
                    <li><a href="/asociacioncultural">ASOCIACIÓN CULTURAL</a></li>
                    <li><a href="/equipo">EQUIPO</a></li>
                </ul>
            </li>
            <li><a href="/revista">LA REVISTA</a></li>
            <li><a href="/unete">ÚNETE</a></li>
            <li class="issuu"><a href="https://issuu.com/correocacultural">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        </ul>
    </nav>
</div>

最佳答案

我改变了一些CSS

.clearfix:after {
  clear:both;
  content:'';
  display: table;
}

.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:46px;
    left:0px;
    z-index:1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}

https://jsfiddle.net/rejhz9fv/2/

关于jquery - 我试图在悬停菜单的一个特定子项时更改菜单 css 样式。不熟悉 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34693895/

上一篇：javascript - jQuery:动画不透明度为 0 然后淡出

下一篇：javascript - 根据页面上的滚动位置进行多种样式更改

相关文章：

css - 如何将 "position: sticky"应用于柔性布局中的 Angular Material 卡？

jquery - 有没有办法防止视口(viewport)因 url 栏等 ui 元素而调整大小？

javascript - 使用 Javascript 和 jQuery 顺序加载 fadeIn 效果

jquery - 将一行缩略图居中放置在另一行下方

javascript - 无法通过Jquery动态添加下拉菜单

html - CSS Boxes : float: left, 但跳到下一行时从左边开始

javascript - JQuery 突出显示 ajax 加载表中的一行

jquery - 如何获取jCanvas版本？

HTML - 是否有正确的容器元素放置在表格行周围？

css - 当页面从桌面加载到移动响应布局时更改列的顺序

©2024 IT工具网  联系我们