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

Html – Element is not appearing when hovering over another element

When I hover over the p1 element the h1 element is supposed to appear but it doesn’t. I am a bit confused by this because when I looked it up this is what it said to do but it doesn’t seem to work.

h1 {
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top: 20px;
  padding-bottom: 20px;
  display: none;
}

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

p1 {
  color: blueviolet;
}

p1:hover + h1 {
  display: block;
}

```
<h1>Welcome to IT202</h1>
<p><strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong></p>
<p1>Show Welcome</p1>

I tried adding ids but that did not work

Tags:

2

Answers


  1. 0

    Don’t use tag as HTMl does not have any builtIn tag insted use . In css #p1:hover{backgroundcolor:red} this may resolve

    Login or Signup to reply.
  2. 0

    "When I hover over the p1 element the h1 element is supposed to appear but it doesn’t."

    False.

    You’re using the next-sibling combinator (+), which targets the following sibling.

    There is no h1 coming after a p1 in your code. Therefore, nothing is being targeted with p1:hover + h1.

    It works, for example, if you put the p1 before the h1.

    h1 {
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top: 20px;
  padding-bottom: 20px;
  display: none;
}

p1 {
  color: blueviolet;
}

p1:hover + h1 {
  display: block;
}

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}
    <p1>Show Welcome</p1>
<h1>Welcome to IT202</h1>
<p><strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong></p>

    If you want to maintain the order of elements on the screen, consider the order property.

    body {
  display: flex;
  flex-direction: column;
}

h1 {
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top: 20px;
  padding-bottom: 20px;
  display: none;
}

p1 {
  order: 1;
  color: blueviolet;
}

p1:hover + h1 {
  display: block;
}

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}
    <p1>Show Welcome</p1>
<h1>Welcome to IT202</h1>
<p><strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search