Question

我有一个菜单，当你将鼠标悬停在下面时会显示一个箭头，但是当你按下它时我也希望它显示箭头。

以下是codepen中的代码：https://codepen.io/ouchie/pen/gMMegZ

HTML

[WebMethod]
public static string MethodName(Dictionary<string, object> em)

这是我使用的CSS。我没有做到这一点，但我在互联网上找到了它

CSS

<div id="menu">
        <ul>
            <li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
            <li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
            <li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
            <li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
            <li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>

        </ul>
    </div>

Answer 1

您可以在悬停的任何位置添加：focus和：active伪类。此外，如果您在页面上并希望选择相应的链接，则使用逻辑添加当前类，该类也应具有与悬停相同的css。

例如：

在：

#menu li:nth-child(2n-1) a:hover::before { ... }

后：

#menu li:nth-child(2n-1) a:hover::before,
#menu li:nth-child(2n-1) a:focus::before
#menu li:nth-child(2n-1) :target::before { ... }

请参阅我的codepen示例： https://codepen.io/anon/pen/gMMeoE

您必须以编程方式将当前类添加到当前活动的菜单项。

Answer 2

试试这个。它适用于索引页面。您必须稍微更改另一页。

HTML：

<div id="menu">
    <ul>
        <li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
        <li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
        <li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
        <li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
        <li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>
    </ul>
</div>

CSS：

#menu {
    position: relative;
    list-style: none;
    float: left;
    width: 800px;
    height: 60px;
    text-align: center;
}

#menu li {
    float: left;
    text-decoration: none;
    display: block;
    font-family: Franklin Gothic Heavy, Gadget, sans-serif;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

#menu ul {
    display: inline-block;
    list-style-type: none;
}

#menu li a {
    position: relative;
    display: inline;
    padding: 11px 27px;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'DejaVu Sans Condensed', sans-serif;
    text-transform: capitalize;
    font-weight: bold;
    color: #000;
    border-bottom: 7px solid #959393;
    background: #979393;
    background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: -o-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: linear-gradient(to bottom, #ffffff, #EDF1F2);
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    opacity: 0.68;
}

#menu li:nth-child(2n-1) a:hover {
    border-bottom-color: #FF0000;
}

#menu li:nth-child(2n) a:hover {
    border-bottom-color: #FF0000;
}

#menu li:nth-child(2n-1) a:hover::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 11.5px solid  transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 11.5px solid #FF0000;
    right: 45%;
    bottom: 0;
}

#menu li:nth-child(2n) a:hover::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 11.5px solid  transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 11.5px solid #FF0000;
    right: 45%;
    bottom: 0;
}

#menu li a:hover {
    color: #FF0000;
    text-shadow: inset 0 0 8px 0 red;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
#menu li a.active {
    color: #FF0000;
    text-shadow: inset 0 0 8px 0 red;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
#menu li a.active {
    border-bottom-color: #FF0000;
}
#menu li a.active::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 11.5px solid  transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 11.5px solid #FF0000;
    right: 45%;
    bottom: 0;
}

JavaScript（jQuery）：

var URL = window.location.pathname; // Gets page name
var page = URL.substring(URL.lastIndexOf('/') + 1);  
console.log(page);
$('#menu ul li  a').each(function() {
    if($(this).attr('href') == page) {
        alert('hi');
        $(this).addClass('active');
    }
});

Demo (CodePen)

制作一个活跃的菜单

2 个答案: