Wordpress : change menu labels on mouse-over [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I'd like to be able to change the wordpress menu labels for some other texts when the mouse pass over it. Here's a pict of what I am aiming :

image

Can someone point me some directions ? Any Jquery trick ? CSS hack ?

Answer 1

How about a pure CSS/HTML solution? The below has the added benefit of maintaining the correct content/style separation and having a minimal code footprint.

Demo Fiddle

HTML

<a href='#' data-englishLabel='School' data-chineseLabel='學校'></a>

CSS

a:before {
    content:attr(data-chineseLabel);
}
a:hover:before {
    content:attr(data-englishLabel);
}

Answer 2

You can do something like this:

JSFiddle

Javascript:

var elem = document.getElementById("list_one");

elem.onmouseover= function(){
  this.value = "Something Else";
}

elem.onmouseout= function(){
  this.value = "Original text";
}

---

CSS version:

JSFiddle

HTML:

<div id="list_one">Original Text</div>

CSS:

#list_one::before{
  content:'Something Else';
  position:absolute;
 visibility:hidden;
}

#list_one{
    position:relative;
}

#list_one:hover{
    visibility:hidden;
}

#list_one:hover::before{
    visibility:visible;
}