问CSS鼠标和鼠标
EN

Stack Overflow用户

提问于 2017-05-05 05:59:24

回答 1查看 6.2K关注 0票数 1

我一直在尝试处理列表元素的鼠标输入和鼠标越位事件。我只想在鼠标进入时在元素下划线，在mouseover/聚焦上突出显示元素，然后在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>

css

回答 1

Stack Overflow用户

发布于 2017-05-05 06:21:13

您需要在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>

jsfiddle code here

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43797542

复制

相似问题

问CSS鼠标和鼠标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS鼠标和鼠标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS鼠标和鼠标
EN