我一直在尝试处理list元素的鼠标输入和鼠标悬停事件。我想简单地想要在鼠标输入时为元素加下划线，在鼠标悬停/焦点上突出显示元素并在mouseleave事件上返回原始元素。以下代码适用于下划线部分，但不适用于突出显示部分。有两种不同的操作，我想在下划线上处理并相应地关注。请帮忙。
underlinefunction();
focusfunction();.nav li {
display: block;
padding-bottom: 8px;
}
.nav li a {
position: relative;
padding: 4px 2px 2px 0px;
text-decoration: none;
color: blue;
text-align: left;
}
.nav li a:after {
content: "";
position: absolute;
bottom: 0;
left: 0px;
height: 2px;
width: 0;
background: blue;
text-align: left;
}
.nav li a:hover:after {
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<div class="navbar-collapse collapse">
<ul class="nav">
<li id="btnabout"><a href="#parallax"><strong>About</strong></a></li>
<li id="btnportfolio"><a href="#portfolio"><strong>PortfolioPortfolio</strong></a></li>
<li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：0)
您需要在css中添加以下代码以突出显示。
.nav li a:hover {
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
-webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.nav li a:focus {
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
-webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
您可以根据需要更改
a:hover或a:focus文字阴影颜色。
.nav li{
display:block;
padding-bottom:8px;
}
.nav li a{
position:relative;
padding: 4px 2px 2px 0px;
text-decoration: none;
color: blue;
text-align: left;
}
.nav li a:hover {
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
-webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.nav li a:after{
content: "";
position:absolute;
bottom: 0;
left:0px;
height: 2px;
width:0;
background: blue;
text-align: left;
}
.nav li a:hover:after{
width: 100%;
} <div class="navbar-collapse collapse">
<ul class="nav">
<li id="btnabout"><a href="#parallax"><strong>About</strong></a></li>
<li id="btnportfolio"><a href="#portfolio"><strong>PortfolioPortfolio</strong></a></li>
<li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li>
</ul>
</div>