当框悬停时出现文本，但是如何从文本链接中删除下划线？答案

【问题标题】：Text appears when box is hovered over, but how to remove underline from text link?当框悬停时出现文本，但是如何从文本链接中删除下划线？
【发布时间】：2020-10-25 12:41:47
【问题描述】：

我一直在设计一个网站，并设法使框的背景在鼠标悬停时褪色，同时文本出现。我现在正在添加文本链接，但似乎无法删除下划线。

我想在这里做两件事：

当文本链接悬停在上面时删除下划线（我希望文本是黑色的）
使文本在悬停时改变颜色（变为灰色）

非常感谢您的帮助！

这是我的代码：

.box-a {
  margin-bottom: 14px;
  margin-top: 10px;
  width: 100%;
  height: 250px;
  float: left;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
}

.box_a_background {
    width:50%;
    height:100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    ms-transition:     all 0.3s ease;
    transition:         all 0.3s ease; 
    position:absolute;
    z-index:2;
    opacity: 1.0;
    background-position: 50% 40%;
  float: left;
}

.box-a:hover .box_a_background {opacity: 0.25;} 

.text-block-a {
  position: absolute;
  margin-top: 205px;
  overflow: hidden;
  height:100%;
  color:#000;
  transform: translateY(-50%);
  text-align:center;
  z-index:1;
  width: 50%;
}

.text-block-a a:hover {
    text-decoration:none;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet'>
 
</head>

<body>
  
  <div class="container">
  
  <div class="content-area-group">

    <div class="box-a">
      <div class="text-block-a">  
        <h4><a href="#">Great cycle routes</h4>
          <p>Check out our guide to the best cycle routes in Nottinghamshire.</a></p>
        </div>
      <div class="box_a_background" style="background-image: url('https://i.postimg.cc/3Nm4HtNY/box-a-image-trent.jpg');"
    </div></div>


    
  </div>
  
  <body>

【问题讨论】：

标签： html css text hyperlink

【解决方案1】：

HTML 中的a 标记定义了一个超链接，其默认样式是带有下划线的蓝色文本，向用户表明该文本可以被点击。要删除它，只需将此代码添加到您的 CSS 中：

a {
  text-decoration: none;
}

这将删除为a 标记设置的任何预定义文本装饰。 text-decoration 可以为您的文本添加下划线、上划线、穿线等。

【讨论】：

【解决方案2】：

我刚刚添加了“text-decoration”并且它正在工作，我还在最后删除了一个额外的“div”元素。

a {
  text-decoration: none;
}
.box-a {
  margin-bottom: 14px;
  margin-top: 10px;
  width: 100%;
  height: 250px;
  float: left;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
}

.box_a_background {
    width:50%;
    height:100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    ms-transition:     all 0.3s ease;
    transition:         all 0.3s ease; 
    position:absolute;
    z-index:2;
    opacity: 1.0;
    background-position: 50% 40%;
  float: left;
}

.box-a:hover .box_a_background {opacity: 0.25;} 

.text-block-a {
  position: absolute;
  margin-top: 205px;
  overflow: hidden;
  height:100%;
  color:#000;
  transform: translateY(-50%);
  text-align:center;
  z-index:1;
  width: 50%;
}

.text-block-a a:hover {
    text-decoration:none;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet'>
 
</head>

<body>
  
  <div class="container">
  
  <div class="content-area-group">

    <div class="box-a">
      <div class="text-block-a">  
        <h4><a href="#">Great cycle routes</h4>
          <p>Check out our guide to the best cycle routes in Nottinghamshire.</a></p>
        </div>
      <div class="box_a_background" style="background-image: url('https://i.postimg.cc/3Nm4HtNY/box-a-image-trent.jpg');"
    </div>


    
  </div>
  
  <body>

【讨论】：

感谢您的回复。链接悬停时如何添加鼠标指针？
您的意思是当您的鼠标指针在图片上时改变光标，或者您想在链接悬停时将鼠标光标图像向下添加到图片上？