Why won't the text in this span underline on hover?-CodePudding

I am trying to get the span to underline the text on hover over anywhere in the image, but it won't work. I can change the color on hover, but not the text-decoration. Is it possible to make it underlined? My html and css are as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>News</title>
    <meta content="" name="description" />
    <meta content="" name="keywords" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"    rel="stylesheet"/>
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div >
      <div >
        <a href="https://www.google.com">
          <div >
            <img
              id="main__story__img"
               
              src="https://media.istockphoto.com/photos/handsome-guy-and-an-attractive-girl-kiss-each-other-near-a-large-picture-id997518432"
            />
          </div>
          <span id="main__story__span">This is the story of a ...</span>
        </a>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

.main__story a {
  color: white;
}

.main__story a:hover {
  text-decoration: underline;
  color: blue;
}

.main__story span {
   display:block;
   font-weight: bold;
   font-size: 40px;
}

#main__story__img {
  border-radius: 20px;
}

.main__story {
  position: relative;
}

span {
  position: absolute;
  bottom: 0;
  margin-bottom: 30px;
  margin-left: 20px;
}

.myfilter{
  position: relative;
}

.myfilter:after{
  position: absolute; content: ''; display: block; top: 0; left: 0; height: 100%; width: 100%;
  background: linear-gradient(to bottom,rgba(245, 245, 245, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
  mix-blend-mode: darken;
  border-radius: 20px;
}

.contain {
  margin-left: 135px;
  margin-right: 135px;
  margin-top: 20px;
}

Long time user, first time poster, as the issue doesn't make sense to me, that I can change some attributes, but not others. Any help would be greatly appreciated.

CodePudding user response：

You are selecting and changing styles of a tag in your :hover. You need to select the child span inside a:hover as follows:

.main__story a:hover span{
  text-decoration: underline;
  color: blue;
}

.main__story a {
  color: white;
}

.main__story a:hover span{
  text-decoration: underline;
  color: blue;
}


.main__story span {
   display:block;
   font-weight: bold;
   font-size: 40px;
}

#main__story__img {
  border-radius: 20px;
}

.main__story {
  position: relative;
}

span {
  position: absolute;
  bottom: 0;
  margin-bottom: 30px;
  margin-left: 20px;
}

.myfilter{
  position: relative;
}

.myfilter:after{
  position: absolute; content: ''; display: block; top: 0; left: 0; height: 100%; width: 100%;
  background: linear-gradient(to bottom,rgba(245, 245, 245, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
  mix-blend-mode: darken;
  border-radius: 20px;
}

.contain {
  margin-left: 135px;
  margin-right: 135px;
  margin-top: 20px;
}

<body>
    <div >
      <div >
        <a href="https://www.google.com">
          <div >
            <img
              id="main__story__img"
               
              src="https://media.istockphoto.com/photos/handsome-guy-and-an-attractive-girl-kiss-each-other-near-a-large-picture-id997518432"
            />
          </div>
          <span id="main__story__span">This is the story of a ...</span>
        </a>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>