Question

我遇到css ：不功能的问题。

当我徘徊到链接时，它们都是下划线Item1＆amp;描述。我不希望在悬停时看到下面的描述下划线。

这是我的菜单代码：

<ul>
 <li>
  <a href="#">
     Item 1
     <span>Description</span>
    </a>
 </li>
</ul>

CSS：

span { display:block; }
ul li a:hover:not(span) { color:blue; text-decoration: underline; }

当我将跨度显示更改为内联块时，它工作正常但需要仅阻止。我该如何解决？

此外，Inline-block显示项目的NEAR描述。我想把它放在项目名称之下。我该怎么做？

Answer 1

你不应该把你的状态（:hover）放在选择器之前。所以你需要把它改成：

ul li a:not(span):hover { color:blue; text-decoration: underline; }

此外，这将不工作，因为，单个元素不能是<a>以及<span>。相反，你需要使用：

span { display:block; }
ul li a:hover { color:blue; text-decoration: underline; }
ul li a:hover span { color:black; text-decoration: none; }

Answer 2

你说的是风格a：not（span），A不是SPAN，当然a不是跨度;）

为此目的使用css类，例如：

span { display:block; }
ul li a:not(.has-span):hover { color:red; text-decoration: underline; }

<ul>
 <li>
  <a href="#">
     Item 1
     <span>Description</span>
    </a>
 </li>
 <li>
  <a href="#" class="has-span">
     Item 2
     <span>Description</span>
    </a>
 </li>
</ul>

CSS：功能不起作用

2 个答案: