CODEWITHSUNDEEP
htmlcss
AJS
AJS

Reputation: 113

Why won't my a:hover work and my <a> tag won't go to link on click?

I have been writing a website that is a bunch of different sections on top of one another. The div with the class class="concertDiv" is the container of one section. I'm trying to have an album cover on the left side of this section and on the right side I want three rows of text all clickable to go to a link. I'm trying to make these three <a> tags, placed one on top of another, change color on hover and go to https://google.com on click, both of these things aren't working.

This is my HTML/CSS code for the project:

a.concertDesc {
  white-space: nowrap;
  color: #f65026;
  text-decoration: none;
  margin: 0 auto;
  padding-bottom: 10px;
}

a.concertDesc: hover {
  color: blue;
}

#albumCover {
  border-radius: 7px;
  width: 300px;
  height: 300px;
}

.concertElement {
  display: inline;
}

.concertDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  padding-left: 200px;
  padding-right: 200px;
  padding-bottom: 70px;
}

@media (max-width: 590px) {
  p.concertDesc {
    white-space: pre-line;
  }
}

@media (max-width: 800px) {
  #albumCover {
    display: none;
  }
}
<div class="concertDiv">

  <img id="albumCover" class="concertElement" src="assets/albumCover.jpg" />

  <div class="concertElement" style="padding-left: 15px;">

    <a class="concertDesc" href="https://google.com" target="_blank" style="font-size: 225%;">Click 1</a>

    <a class="concertDesc" href="https://google.com" style="font-size: 150%;">Click 2</a>
    <a class="concertDesc" href="https://google.com" style="font-size: 140%;">Click 3</a>

  </div>

</div>

Thanks

Upvotes: 1

Views: 933

Answers (2)

xfoz
xfoz

Reputation: 56

Ok, so problem one:

a.concert.Desc: hover shouldn't have this white space here
                              ^
                           here

problem two:
remove the pointer-events: none; style because that prevents the link from working.

curious: did you copy and paste this?

Upvotes: 0

Olafant
Olafant

Reputation: 828

With pointer-events set to none you prevent touch and click to be effective.

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

The whitespace in a.concertDesc: hover doesn't belong there.

Upvotes: 1

Related Questions