1

I have been struggling with this for a few days and cannot work out the answer: I am trying to simply change the background of a box when on hover. I have managed to do this for the text but the rest of the box does not change.

The link to the problem can be seen here

Here is the current code I have: HTML

<html lang="en">
  <head>

    <link rel="stylesheet" type="text/css" href="spanish.css"
    media="all and (min-width: 1300px)"  />

    <div class="pricebox1">
      <a href="">Conversational Spanish</a>
    </div>

  </body>
</html>

CSS

.pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1 :hover {
  background: #ffffff;
  color: red;

What am I doing wrong?

Johannes
  • 53,485
  • 15
  • 52
  • 104
Doug Pitchers
  • 17
  • 3

4 Answers4

1

Your code .pricebox1 :hover doesn't select the :hover state of the .pricebox1. It point to the :hover state of the children of the .pricebox1. Therefore, it doesn't change the box color.

If you want the hover state of a child change the background of the parent, it is not possible, as "Cascading Style Sheets only supports styling in cascading direction, not up"

So, you can use .pricebox1:hover to change the pricebox1 background color and .pricebox1:hover a to update styles of the a inside.

You can use a workaround solution for it here

Otherwise, you need to use Javascript to update the style of the parent when the child is hover, not only by css

Nguyen Phong Thien
  • 2,413
  • 9
  • 26
0

Avoid the space in .pricebox1 :hover - make it .pricebox1:hover to change the background for .pricebox1 on hover.

You'll have to create a separate a:hover rule for the link then to change the text color.

Johannes
  • 53,485
  • 15
  • 52
  • 104
-1

This? In the .pricebox1 :hover {} is not background but background-color

    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
  color: red;
}
<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>

And if you want to change the color of the text at the same time, simply do:

.pricebox1 > a:hover{
  color: red;
}


    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
}

.pricebox1 > a:hover{
  color: red;
}
<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>
mindmaster
  • 1,420
  • 8
  • 20
-1

From my end, the code is working fine. The only thing you need to change is the anchor inside .pricebox1 since have got default styling.e.g.

.pricebox1 a:hover{
   color: red;
}
chrisantus makokha
  • 1
  • 2