覆盖特定 div 的 CSS 样式？

Question

覆盖特定 div 的 CSS 样式？

5

我有一个针对页面上所有链接的 a:hover 样式：

a:hover {
  background-color: blue;
  text-decoration: underline;
  color: black;
}

但是在一个 div 中有特定的元素，当你悬停在它们上面时，我不希望发生任何事情，所以我可以像这样做吗？

#what_we_offer a:hover {
  background-color: none:
  text-decoration: none;
  color: none;
}

基本上，当鼠标悬停在特定链接上时，我不希望它执行上述任何操作。

谢谢。

- Mo.

8个回答

6

#what_we_offer a:hover {
  background-color: transparent;
  text-decoration: none;
  color: none;
}

使用transparent代替none即可，这样可以正常工作。

感谢您提供的所有答案。

- Mo.

3

与其使用ID选择器，建议使用类选择器。

/* for link where you want to change color on hover */
    .Link a:hover { 
      background-color: none: 
      text-decoration: none; 
      color: red; 
    } 

/* for link where you dont want to change color on hover */
    a:hover { 
      background-color: none: 
      text-decoration: none; 
      color: none; 
    }

- Pranay Rana

1

关于 id 和 class 的选择 - 这取决于 @Mo 是否有一个特殊的 div 或一组特殊的 div。 - scunliffe

1

当您想要覆盖CSS值时，可以采取两种方法：在要覆盖的CSS声明后添加新的CSS声明或使用"!important"。因此，对于您的问题，您可以尝试以下操作：

a.reset:hover {
 background-color: #FFFFFF;
 text-decoration: none;
 color: #000000;
}

...然后添加您想要覆盖此新类的链接：

<a href="#" class="reset">Link with reset</a>

但是这个CSS类必须在普通的“a”标签声明之后声明，否则它将无法工作。

另一种方法是使用!important，但我建议不要滥用这个。但是对于覆盖它，这是最快速和最安全的方法来确保它能够工作：

a.reset:hover {
 background-color: #FFFFFF !important;
 text-decoration: none !important;
 color: #000000 !important;
}

..并且您可以在CSS文件中的任何位置添加此代码，任何带有“reset”类的链接都将获得这些样式：白色背景，无文本装饰和黑色文本。

哦，关于背景，您可以尝试：background: none; 将清除所有背景样式.. 背景颜色，背景图像等

顺便说一下.. id用于引用单个元素，它必须是唯一的.. 而类用于引用多个元素。如果您像使用CSS类一样多次使用相同的id.. 您可能会破坏JavaScript，并且它不会验证您的HTML。

- esgy

0

是的，但要注意a:hover{}应该放在#what_we_offer a:hover {}之前。

- ttchong

2

由于它们具有不同的特异性，顺序并不重要。 - Quentin

0

我认为，如果你反过来做Pranav说的事情，你可以减少修改，即：


/* 对于您希望在悬停时不更改颜色的链接 */
    .Link a:hover { 
      background-color: none: 
      text-decoration: none; 
      color: red; 
    }
/* 对于您希望在悬停时更改颜色的链接 */
    a:hover { 
      background-color: none: 
      text-decoration: none; 
      color: none; 
    }

所以你需要在一些特定的DIV中为a href添加类。

- GoodSp33d

-1

你可以利用CSS选择器。我认为最好的方法是使用选择器not。让我给你举个例子：

<html>
        <head>
                <style type="text/css">
                        a:not([not_custom]){
                                background: #00FF00;
                                color: #FF0000;
                        }                    
                </style>
        </head>
        <body>
                <div>
                        <a href="">Test 1</a>
                        <a href="" not_custom="">Test 2</a>
                        <a href="">Test 3</a>
                        <a href="" not_custom="">Test 4</a>
                        <a href="">Test 5</a>
                        <a href="" not_custom="">Test 6</a>
                </div>
        </body>
</html>

正如您所看到的，我正在使用not选择器定义a样式。因此，我想要将绿色背景和红色颜色放在所有没有not_custom属性的a上。由此可见，Test 1、Test 3和Test 5将有定义的style，而Test 2、Test 4和Test 6将是普通的，没有样式。

注意：您可以定义任何属性。如果您愿意，它不必被命名为not_custom。它可以被称为whatever。

- Harph

在编写 HTML 时不要编造属性（除非您正在编写 HTML5（尽管它仍处于草案阶段）并符合其对自定义属性命名的限制（而您没有）。:not并不真正被广泛支持以进行严格使用（特别是如果失败会导致无法阅读的文本，这在这种情况下可能是个问题）。 - Quentin

-4

a:hover { 
  background-color: none: 
  text-decoration: none; 
  color: none; 
}

这是正确的。

如果你只想要特定的页面，添加

body-id a:hover { 
  background-color: none: 
  text-decoration: none; 
  color: none;
}

- Prashant

这不正确（none 不是一种颜色），你需要使用 id 选择器，而不是类型选择器，问题中说的是 div 而不是 page，而且你还没有格式化你的代码。 - Quentin

你的答案不正确。如果他有一个默认的背景颜色、文本装饰等等，那么当鼠标移动到该 div 上时，它将会消失。所有这些属性都应该在 "a:hover" 块中设置为该 div 的默认属性。 - MD Sayem Ahmed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scunliffe · Accepted Answer

是的，那应该可以正常工作，但你可能不想设置none，除非你真的不想有任何样式......设置基础颜色等应该可以正常工作。

#what_we_offer a:hover {
  background-color:#fff;/*presuming was originally white*/
  text-decoration:none;
  color:#000;/*presuming was originally black*/
}

PS我不确定这是否只是一个笔误，但你原来的background-color:none;行以冒号而不是分号结束，这将导致问题。