Question 43749 in Html Question posted in
Some basic documentation can be found here.

Pseudo class is not working as expected.. after hovering button …paragraph is not getting displayed – Html

button { width: 100px; height: 30px; background-color: grey; }

p {
  display: none;
  border: 1px solid black;
  color: black;
  width: 400px;
  height: 100px;
  padding: 10px;
  text-align: center;
}

button:hover p {
  display: block;
}
<button>
   Click Me!
</button>
<p>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sint obcaecati 
   eligendi eos officia ut itaque deserunt repellat deleniti similique quis
   pariatu doloremque rem beatae accusamus, commodi esse eaque magnam.
</p>

after hovering on button paragraph is not getting displayed

Tags:

2

Answers


  1. 0

    In this case you can use button:hover+p

    button {
  width: 100px;
  height: 30px;
  background-color: grey;
}

p {
  display: none;
  border: 1px solid black;
  color: black;
  width: 400px;
  height: 100px;
  padding: 10px;
  text-align: center;
}

button:hover+p {
  display: block;
}
    <button>
        Click Me!
    </button>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sint obcaecati eligendi eos officia ut itaque deserunt repellat deleniti similique quis pariatu doloremque rem beatae accusamus, commodi esse eaque magnam.
</p>
    Login or Signup to reply.
  2. 0

    Instead of using

    button:hover p {display: block;}

    use

    button:hover + p {display: block;}

    as p and button are sibling elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search