更新

Question

我目前是一名学习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>

这对我来说很难找到如何做到这一点，所以非常感谢！：）））

Answer 1

在CSS中使用Opacity非常简单。您可以将对象的不透明度的值设置为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;
}

“＆gt;”是什么它是否仅将样式应用于作为父对象的直接子对象的对象。在这种情况下，“a＆gt; h3”表示此样式仅适用于直接嵌套在链接内的h3。

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

Answer 2

更新的答案：

将opacity设置为hover，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

在opacity：https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

上查看此文档

Answer 3

你正在使用不透明度：0.5 in h3，如果h3是锚，那么在悬停时你只需要给出不透明度：1

如果您也可以发布您的HTML，也会有所帮助

阅读这篇文章，css技巧有很多好文章

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

Answer 4

如果您想要做的是这样的话：

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

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

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

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

不透明度关闭a：悬停和a：已访问

带徽标/横幅/标题

4 个答案:

更新