CODEWITHSUNDEEP
htmlcsshyperlinkmousehovertextchanged
user4474372
user4474372

Reputation:

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;
}

Upvotes: 1

Views: 5276

Answers (4)

user4474372
user4474372

Reputation:

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

Upvotes: 0

moeses
moeses

Reputation: 507

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!

Upvotes: 0

user4433485
user4433485

Reputation:

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

Upvotes: 1

Frank Winters
Frank Winters

Reputation: 193

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

Upvotes: 0

Related Questions