1

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;
}
  • 4
    Show us what you've done already:) by posting your code –  Apr 09 '15 at 07:21
  • Alright, I updated my question with the code. –  Apr 09 '15 at 08:03
  • Ok and now, what do you want the code to do when hover on one, two or three –  Apr 09 '15 at 08:05
  • To change a text underneath the code, like "You hovered link 1" or "This leads to site blablabla" –  Apr 09 '15 at 08:09
  • http://jsfiddle.net/kyamct30/ your code works? edit -> Do you understand what the code does? –  Apr 09 '15 at 08:10
  • The code seems logical to me but it doesn't work. It just won't display anything when hovering over a link. When I leave out the "display: none" part, all three "You hovered...." get displayed so the code gets executed but sth is not working as it seems. –  Apr 09 '15 at 08:22

4 Answers4

1

The reason why this is not working for you: (Can't be sure since u have not linked your code) 

<a href="#" class="a-1">one</a>

<div class="element-1">hello one</div>

Are you sure you imported the same classes?

and here might be the problem : class="a-1" & class="element-1" for you, if you want the link to change color on mouseover you should simply use 

a:hover { 
    color: yellow;
}

If you want to have a color for all options: 

a:link {
    color: #B2FF99;
}

a:visited {
    color: #FEFEFE;
}

a:hover {
    color: #323232;
}

a:active {
    color: #121211;
}

article: http://www.w3schools.com/cssref/sel_hover.asp

  • 1
    Thanks for your reply. But I don't want to change the color of the link. I would like to change a text [elsewhere] when hovering over a link. –  Apr 09 '15 at 07:38
0

I think this is what you are looking for, if not let me know. 

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
} 
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Test this code here

Frank Winters
  • 193
  • 13
0

WP-Style Take a look at my WP-Backend (German, sorry ;) )

Navigate from 1 to 2 - in this file >style.css< you can edit your website's style.

In 3 paste your code. Remember to use the same id's and classes for your elements!

However like Katherina mentioned, we need to see your code!

moeses
  • 497
  • 1
  • 6
  • 21
  • The code is exactly this: http://jsfiddle.net/audetwebdesign/p7WUu/ Including it to this file did not help, either. –  Apr 09 '15 at 07:36
  • 1
    Of course this one works - But what we need to see is the output form your wordpress-site, where do you want to embed it - maybe a !important will do the job – moeses Apr 09 '15 at 07:39
  • I tried the !important already. The output can be tested here: http://wordpress.slipstreamgx.com/weaponry/ –  Apr 09 '15 at 07:47
  • Hey check this question about the ~ http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do Try to put the a's and the elements in one div, maybe the wrapping p cuts the connection between those elements – moeses Apr 09 '15 at 10:00
  • Awesome. Placing
    around the HTML code solved the problem. How can I mark your comment as answer? Thanks alot :)
     –  Apr 09 '15 at 10:11
  • haha yeah great :) I think there must be somewhere a green checkmark for this - glad that i could help you and good luck for everything with your project – moeses Apr 09 '15 at 10:36
0

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

Community
  • 1
  • 1