-1

Is it possible to change the value of a <p> after hovering over an <h1> only using CSS?

When the user hovers over a heading, I want the color value of a <p> element to change accordingly. I'd like to achieve this using only CSS.

das-g
  • 9,718
  • 4
  • 38
  • 80
Hrak Torosian
  • 1
  • 1

6 Answers6

2

Yes You can. Here is an example.

 #a:hover ~ #b {
background: #ccc;
   }

<h1 id="a">Heading</h1>
<p id="b">random Text</p>

But element with id b must be after a.

Hope that was Helpful!

Sahith Vibudhi
  • 4,935
  • 2
  • 32
  • 34
  • 1
    if you have 10 of these on a page, you'd have 10 different selector expressions... not very robust – hair raisin Oct 22 '15 at 18:44
  • Thank you very much you helped me a lot. I was wondering if it is possible to click on the id a and have the changes on b staying. If it is possible, how is it done? – Hrak Torosian Oct 28 '15 at 15:07
  • you need javascript to do that. Here [link](https://css-tricks.com/forums/topic/how-to-change-text-color-when-clicking-in-another-div/) you can read about it. – Sahith Vibudhi Oct 29 '15 at 12:29
0

if the h1 directly precedes the <p> tag, you could do something like:

h1:hover + p { color:red; }

Note that IE needs a <!doctype> before it will honor hover on elements other than <a>, and the + selector does not work in IE 6

hair raisin
  • 2,618
  • 15
  • 13
0

It is possible, but requires a sort of "hack". My advice would be to go with JavaScript, JQuery for this action, much easier.

ChrisRun
  • 993
  • 1
  • 10
  • 24
0

I'm reading this question as changing the actual value inside the <p> element. If that's the case here is how it can be done.

Fiddle: https://jsfiddle.net/fc3rhgow/1/

HTML:

<h1 id="myH1">this is the h1</h1>
<p id="myP">this is the p</p>

JavaScript:

var h1 = document.getElementById("myH1");
var myP = document.getElementById("myP");

h1.addEventListener("mouseover", mouseOver);

function mouseOver(){
    myP.innerHTML = "new value";
}
Brett_G
  • 56
  • 4
0

Perhaps this decision will suit you. Good luck.

h1:hover + p:before{
  content:'Ohhh hover h1';
  }
h1 + p:before{
  content:'h1 no hover ';
  }
<h1>Header H1</h1>
<p></p>
Bear GRiZZLY Xi
  • 315
  • 2
  • 11
-1

Depending on what you mean by 'value', and what your HTML looks likes (ie, which p element you wish to modify) you can do something like...

h1:hover p
{
    color: red;
    font-size: 2em;
}

OR maybe this?

h1:hover ~ p
{
    color: red;
    font-size: 2em;
}

OR this perhaps?

div h1:hover p
{
    color: red;
    font-size: 2em;
}

OR maybe even this?

h1:hover > div p
{
    color: red;
    font-size: 2em;
}

Whatever you need to to target mate...

NB: As far as I know, we can't target parent selectors :-(

An0nC0d3r
  • 1,275
  • 13
  • 33
  • This way the `p` must be inside of the `h1`.. not really a good idea. – Jeroen Noten Oct 22 '15 at 18:41
  • He hadn't said otherwise... its a snippet for him/her to investigate, geez – An0nC0d3r Oct 22 '15 at 18:42
  • I think you might be confusing immediate child selector (`>`) with the adjacent sibling selector (`+`) – hair raisin Oct 22 '15 at 18:48
  • ??? Without any HTML provided and not knowing which

    he wishes to manipulate, I think this answer is a fair, well rounded one. What makes you think I'm getting confused with these selectors?

     – An0nC0d3r Oct 22 '15 at 18:51
  • @AdamJeffers I just meant that all your examples except the second one rely on the `p` being within the `h1`, and the second one will change the color of all the `p` tags on the page that come after the `h1` being hovered over. I did not downvote you, btw – hair raisin Oct 22 '15 at 18:54
  • Valid point, we have no way of targeting parents as far as I know? Ill add that to my answer – An0nC0d3r Oct 22 '15 at 18:56