【问题标题】：Opacity Off on a:hover and a:visited在 a:hover 和 a:visited 上关闭不透明度
【发布时间】：2014-11-30 07:13:50
【问题描述】：

我目前是一名学习 CSS 和 HTML 的 7 年级学生，而我学习 CSS 和 HTML 才 6 个月。我喜欢网页设计，这是我想做的事情。我也是该网站的新手，希望每当我遇到困难时，这里的社区都能帮助我。

所以这是我的问题：当鼠标悬停在链接上时，我不知道如何禁用不透明度这是我的小 CSS

 <style>

     body {

         background-size: cover;
         background-repeat: no-repeat
         }
     h2 {

         font-family: 'Dancing Script', cursive;
         font-size: 60px;
         color: #FFDBFF;
         text-align: center;
         text-shadow: 6px 6px 6px #A093A0
     }
     h3 {

         font-family: 'playball', cursive;
         font-size: 57px;
         color: #FFCCCC;
         text-align: center;
         background-color: Black;
         opacity: 0.5
     }
     /* unvisited link */
     a:link {
         color: #FFCCCC;
         text-decoration: none;
     }
     /* visited link */
     a:visited {
         color: #BA9595;
     }
     /* mouse over link */
     a:hover {
         color: #FF00FF;
     }
     /* selected link */
     a:active {
         color: #0000FF;
     }
 </style>

HTML：

一些带有徽标/横幅/标题的随机文本

         <h3> Home </h3>
     </a>
     <a href="">
         <h3> Link </h3>
     </a>
     <a href="">
         <h3> Link </h3>
         </a>

我很难弄清楚如何做到这一点，非常感谢！ :)))

【问题讨论】：

欢迎来到 Stack Overflow！ Stack Overflow 是一个面向专业和爱好者程序员的问答网站。它是作为 Stack Exchange 问答网站网络的一部分由您构建和运行的。在您的帮助下，我们正在共同努力构建一个包含有关编程的每个问题的详细答案的库。
请在下面找到答案并将满足您需求的答案标记为已接受。 :)

标签： html css hyperlink hover

【解决方案1】：

不透明度在 CSS 中使用起来非常简单。您可以将对象的不透明度值设置为 0 到 1 之间的任意数字，其中 1 表示完全不透明，0 表示不可见。

这是一个关于如何在 CSS 中使用不透明度的示例。

a {
    /*At a normal state, this link is halfway visible*/
    opacity: 0.5;
}

a:hover {
    /*When the mouse is hovering over this link, it is fully visible.*/
    opacity: 1;
}

a:active {
    /*While this link is being pressed, it is invisible.*/
    opacity: 0;
}

如果您想确保您的链接在鼠标悬停时完全可见，您可以这样做：

a:hover {
    opacity: 1;
    color: #FF00FF;
}

更新

重读您的代码后，我现在意识到，由于您的所有内容都是嵌套在链接中的 h3，您需要设置 h3 的不透明度而不是链接本身。

例如，如果您希望链接在悬停时完全不透明，您可以使用以下代码：

a > h3 {
    opacity: 0.5;
}

还有……

a > h3:hover {
    opacity: 1;
}

“>”所做的只是将样式应用于作为父对象的直接子对象的对象。在这种情况下，“a > h3”意味着该样式仅适用于直接嵌套在链接内的 h3。

这样，只有嵌套在链接中的 h3 才会改变其不透明度。作为额外的措施，我创建了一个 JSFiddle，它给出了该代码如何工作的示例。你可以找到here。

【讨论】：

我刚刚更新了我的回复，希望新信息对您有所帮助。
非常感谢！！！您同时帮助了我并教育了我:)）））我可以将“>”应用于任何标签吗？有没有“
“>”形式的嵌套将适用于任何两个标签，只要它们正确地放入 HTML。这是一个很好的链接，可以帮助您更好地了解它们的工作原理：w3schools.com/css/css_combinators.asp :)

【解决方案2】：

更新答案：

像这样在hover 上设置opacity：

a h3{
  opacity: 0.5;
  color: #FF00FF;
}

a:hover h3{
  opacity: 1;  /* or set it to 0, whatever you want */
  color: #FF00FF;
}

&lt;a href="#"&gt;&lt;h3&gt;Link&lt;/h3&gt;&lt;/a&gt;

在opacity：https://developer.mozilla.org/en-US/docs/Web/CSS/opacity 上查看此文档

【讨论】：

这没有解决 OP 标记中使用的格式，其中 h3 被包裹在锚内，并且只有他希望设置样式而不是锚的 h3，我会否决但它花了我一分
@CodeUniquely 哎呀！没有注意到问题中的更新。答案已更新。感谢您指出！ :)
@DinkleFarts 你用的是什么浏览器和操作系统？

【解决方案3】：

您在 h3 中使用 opacity:0.5，如果 h3 是锚点，则在悬停时您只需提供 opacity:1

如果你也能发布你的 html 也会很有帮助

也看这篇文章，css tricks 有很多好文章

http://css-tricks.com/almanac/properties/o/opacity/

【讨论】：

【解决方案4】：

如果你想做的是这样的：

<h3>This is a <a>link</a>.</h3>

即使您在 a:hover css 语句中有 opacity: 1，最初也不可能使用 CSS。

但是，您可能会找到一些其他方法来模仿这一点。一种方法是将a 标记保留在h3 标记之外，并使用相对/绝对定位将其移动到h3 上，例如http://css-tricks.com/non-transparent-elements-inside-transparent-elements/。

另一种（可能更简单）的方法是远离半透明的h3。您可以使用透明背景颜色并手动将内部文本设置为透明的类。

【讨论】：