html - 你怎么边界底部:none; the previous menus?-6ren

html - 你怎么边界底部:none; the previous menus?

转载作者：太空宇宙更新时间：2023-11-03 23:26:14

26

4

所以我使用 flex 创建了一个菜单。当菜单未悬停时，我使用底部边框来指示用户将鼠标悬停在菜单上时可以选择的元素。

当用户将鼠标悬停在菜单上时，我想删除用户未将鼠标悬停在其他菜单上的底部边框。

我的代码可以删除悬停菜单后的菜单底部边框。

问题:我的代码无法删除悬停菜单之前的菜单底部边框。

JSfiddle 链接:http://jsfiddle.net/Hiroga/pubLdtxh/

CSS:

/*
    ColorCombo Ref:http://www.colorcombos.com/color-schemes/107/ColorCombo107.html
    #6699CC
    #003366
    #C0C0C0
    #000044
*/

body {
    background-color:#000044;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:14px;
}

/*Navigation*/
nav {
    display:flex;
    width:auto;
    height:auto;
    justify-content:center;
    align-content:center;
    background-color:#C0C0C0;
    border-radius:5px;
    box-shadow:5px 5px 5px;
}

nav > div {
    margin:5px;
    cursor:pointer;
    border-radius:5px;
}

.menu{
    border-bottom:3px solid black;
}

.menu > div {
    display:none;
}

.menu:hover{
    border-bottom:none;
}

.menu:hover ~.menu{
    border-bottom:none;
}

.menu:hover > div{
    display:flex;
    margin-top:3px;
    background-color:#C0C0C0;
    border-radius:5px;
    justify-content:center;
    align-content:center;
}

.menu:hover > div:first-child {
    border-top:3px solid black;
}

.menu:hover > div:last-child {
    border-bottom:3px solid black;
}

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample Modern</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
    <nav>
        <div>
            Home
        </div>
        <div class="menu">
            Menu
            <div>
                Item
            </div>
            <div>
                Item
            </div>
            <div>
                Item
            </div>
        </div>
        <div class="menu">
            Menu 2
            <div>
                Item 2
            </div>
            <div>
                Item 2
            </div>
            <div>
                Item 2
            </div>
        </div>
        <div class="menu">
            Menu 3
            <div>
                Item 3
            </div>
            <div>
                Item 3
            </div>
            <div>
                Item 3
            </div>
        </div>
    </nav>
</body>
</html>

最佳答案

观看直播 `jsFiddle`

添加这个，

.menu:not(:active){
    border-bottom:none;
}

关于html - 你怎么边界底部:none; the previous menus?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26864128/

26

4

0

文章推荐： node.js - 将自定义登录表单添加到 hapi-auth-basic

文章推荐： c# - 如何使用XmlDocument在xml中添加处理指令

文章推荐： c# - 解析 BigInteger 时出现 FormatException

文章推荐： node.js - $ mongoDB findOneAndUpdate() 中的投影

sql - 甲骨文 SQL : Previous MAX sore in all previous quarters
用于获取所有季度中每个 ID 的 MAX 先前分数的最佳方法。给定: ID QTR SCORE 21 1 3 21 2 5 21 3 3
ruby-on-rails - Rails : Previous and Next record from previous query
我的应用程序包含照片，用户可以搜索符合特定条件的照片。假设某个用户通过标签搜索照片，我们得到如下信息: @results = Photo.tagged_with('mountain') 现在，@res
java - Java 中的 SELECT 类似 "if Value of previous Month is negative, do sum of Value of the typed Month and the Value of the previous one"
该表称为 imposto。 +------------------+------------+------+-----+---------+-------+ | Field |
React and Firebase Firestore V9 Previous Page Pagination returning to "first page"(React和Firebase Firestore V9 Previous Page分页返回“首页”)
我在这里不知所措。我觉得我已经尝试了所有的方法，并使用了其他帖子/教程中解释的确切方法。我知道您需要使用光标并设置第一个和最后一个可见文档，以便在向前移动的情况下从最后一个文档开始，在向后移动的情况下
CSS反向过渡并选择 previous sibling
Bootstrap容器横向有两种形式。将鼠标悬停在 Form1 上将增加宽度并减少 form2 的宽度。但逆转并没有发生。请提出任何建议。 Bootstrap Example
CSS :has(+) for previous sibling elements
所以我刚读到我可以定位 previous sibling elements使用 :has(+ ) 伪类。我去执行了以下规则。不幸的是，这是行不通的。我在祈祷什么吗？ p { margin: 2r
javascript - 如何制作图像轮播控件 'next'和 'previous'
我正在制作图像轮播看我的 fiddle :https://jsfiddle.net/gd2n6paw/8/ 我是 jquery 新手，只是想知道我们如何制作轮播“下一个”和“上一个”控件，感谢您的帮
r - 反连接但只返回 "previous"缺失行
示例数据: library(dplyr) x % arrange(name,timestamp) 我想找到数据帧 anti_join(y,x) 中每个连续 block (使用 timestam
hadoop - Hadoop previous.checkpoint位置
我尝试了hadoop-1.0.3以及1.0.4。两者都在伪集群模式下。我的理解是，previous.checkpoint目录应该在由“fs.checkpoint.dir”指定的辅助名称节点下创建吗？
sql - 如何以每条记录都与 "previous"记录连接的方式自连接表？
我有一个 MS SQL 表，其中包含具有以下列的股票数据:Id、Symbol、Date、Open、High、Low、Close。我想自行加入该表，这样我就可以获得关闭的每日百分比变化。我必须创建一
selenium - 如何正确使用XPath previous-sibling
我正在使用 Selenium IDE 为我的网站编写测试，但我在让 selenium 使用 previous-sibling 单击按钮时遇到了问题 Arcade Reader 我
jquery - 返回 "previous function"
我有这个脚本: $('#ap').click(function() { $('#content-container').html($('#alertpay').html()); retu
jquery - 如何检查 .previous() 是否失败
这个问题已经有答案了: how to judge an element's previous or next element exist with jquery? (4 个回答) 已关闭 7 年前。
javascript - 浏览器的 "Previous"按钮位置改变了吗？
有没有办法改变浏览器中“上一个”按钮的位置？问题如下: 用户进入页面用户点击缩略图大图像出现在弹出窗口(灯箱)和 URL 更改来自 http://example.com/至 http://ex
javascript - Previous Function 如何将其结果传递给回调
我试图了解回调在这种情况下的工作原理。例如给定这段代码: var images = jQuery.map((1234567 + '').split(''), function(n) { retu
java - ResultSet.previous 不工作
我似乎无法按照我想要的方式滚动浏览我的 ResultSet : public void getCurves(String runId, File file, Connection conn) {
javascript - jquery脚本来选择 previous sibling
嗨，我正在使用 jquery mobile，这是代码 parisfrance generique code:24
java - 如何使用有序映射 Iterator.previous()
使用 Apache Commons Collections，我找到了 OrderedMapIterator 接口(interface)，可以在 OrderedMap 中来回导航。迭代到下一个条目按预期
mysql错误: an alias was previously found
我在mysql查询中使用这些代码 select c1.date,sum(SELECT IFNULL(cx.purchase-cx.sold,0))+MAX(p.openqty) as open
mysql - SQL "previous"查询的意外结果
我正在尝试从数据库中获取上一张图像，其中图像按 ID 号列出。经过一番研究后，我遇到了这个查询，它应该提供之前的结果。然而它并没有这样做。相反，它提供小于当前 ID 号的第一个结果。 (代码格式为 P

首页

博学

6Ren·AI

商城

html - 你怎么边界底部:none; the previous menus?

观看直播 `jsFiddle`

首页

博学

6Ren·AI

商城

html - 你怎么边界底部:none; the previous menus?

观看直播 jsFiddle

观看直播 `jsFiddle`