Search code examples
htmlcsshyperlinkmousehovertextchanged

Change Text on mouse hover of a link

I am designing a wordpress website and would like to change a text underneath a set of links. I already found this treat and it looked promising: Solution to problem

Unfortunatey, this solution does not work for me. I included the CSS using the "Simple Custom CSS" plugin and included the html code like it is presented in the example. The links are there, but no text gets displayed. When I leave the "display: none" part out, I see all three text blocks. What am I doing wrong?

My code in the page file:

<a href="#" class="a-1">one</a>
<a href="#"class="a-2">two</a>
<a href="#"class="a-3">three</a>
<div class="element-1">hello one</div>
<div class="element-2">hello two</div>
<div class="element-3">hello three</div>

My code in the custom css file:

.element-1, .element-2, .element-3{
     display: none;
}
.a-1:hover  ~ .element-1 {
     display: block;
}
.a-2:hover  ~ .element-2{
     display: block;
}
.a-3:hover  ~ .element-3 {
     display: block;
}
Solution

  • Answer from moesphemie:

    Hey check this question about the ~ stackoverflow.com/questions/10782054/… Try to put the a's and the elements in one div, maybe the wrapping p cuts the connection between those elements