为什么文本修饰在我的代码中不起作用？

问题描述 投票：2回答：2

我的代码中的“列表项2”在下拉超链接中没有带下划线的超链接，直到我将鼠标悬停在它上面。这是我期望并希望它做的。

问题是当我尝试向下拉链接添加多个超链接时，如“列表项1”所示，超链接在我将鼠标悬停在它们之前都加下划线。

我必须将“列表项1”的链接1和2放在一个中，因为没有它，链接1和2相互重叠。如果我在重叠时在它们之间添加<br>，这也会通过向下推动来影响“列表项2”。

要清楚，我希望在同一级别上“列表项1”和“列表项目2”，并且所有链接都不加下划线，直到我将鼠标悬停在它们上面。

我在网上搜索过，似乎'text-decoration：none'的问题很常见，但我无法找到解决我特定问题的方法。

在我的例子中，我将href属性留空，因为它们链接到的内容在这里并不重要。

ul {
  list-style-type: none;
}

a:hover {
  text-decoration: underline;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<ul>
  <div class="dropdown">
    <li>list item 1</li>
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </div>

  <div class="dropdown">
    <li>list item 2</li>
    <a class="dropdown-content" href="" target="_blank">link 1</a>
  </div>
html css text-decorations
2个回答
4
投票

您需要定位a元素，以便在两种情况下都可以使用额外的包装器并调整CSS，如下所示：

我还纠正了无效的HTML，因为你只允许使用li作为ul的孩子

ul {
  list-style-type: none;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
}

.dropdown-content a {
  text-decoration: none;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<ul>
  <li class="dropdown">list item 1
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </li>

  <li class="dropdown">list item 2
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a>
    </div>
  </li>
</ul>
2
投票

调整这些css，你需要为.dropdown-content a添加css并将a:hover移动到结尾

.dropdown-content a{
  text-decoration: none ;
  }

  a:hover {
  text-decoration: underline ;
}


<!DOCTYPE html>

<html>
<head>
<style>
  ul {
  list-style-type:none;
}



.dropdown {
  display: inline-block;
  width:100px;
  height:25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none ;
 }
 
 .dropdown-content a{
  text-decoration: none ;
  }
  
  a:hover {
  text-decoration: underline ;
}
 

.dropdown:hover .dropdown-content {display: block;}
</style>
</head>
<body>


<ul>
<div class="dropdown">
  <li>list item 1</li>
    <div class="dropdown-content">
    <a href="" target="_blank">link 1</a><br>
    <a href="" target="_blank">link 2</a>
    </div>
</div>

<div class="dropdown">
  <li>list item 2</li>
  <a class="dropdown-content" href="" target="_blank">link 1</a>
</div>

 </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.