How to change hovers?-CodePudding

I want to change the font size and color of the a when I hover over p. It is not working. Probably there is a simple solution, but I am struggling with this since a few hours.

If anyone has not to complicated links related to this topic I also would be happy

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p:hover div nav a {
        color: blue;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <a href="">One</a>
        <a href="">Two</a>
        <a href="">Three</a>
      </nav>
    </div>
  </body>
</html>

CodePudding user response：

Your CSS selector p:hover div nav a is incorrect. This would refer to an <a/> within a <nav/> within a <div/> within a <p/> that is being hovered. You can fix this with the change I made below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      nav a:hover { /*selects all hovered <a/> within a <nav/>*/
        color: blue;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <a href="">One</a>
        <a href="">Two</a>
        <a href="">Three</a>
      </nav>
    </div>
  </body>
</html>

CodePudding user response：

Hi there i get the simple solution for you .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       
        
        p:hover   .hv {
        
        color: blue;
        font-size: 22px;
        
        }
        
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <div >
        <a  href="">One</a>
        <a  href="">Two</a>
        <a  href="">Three</a>
        </div>
      </nav>
    </div>
  </body>
</html>

CodePudding user response：

Hi there ok so if i might get you . you want to get

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       
        
        .hv a:hover{
        
        color: blue;
        font-size: 22px;
        
        }
        
        
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <div >
        <a  href="">One</a>
        <a  href="">Two</a>
        <a  href="">Three</a>
        </div>
      </nav>
    </div>
  </body>
</html>