Question

当鼠标经过它时，我希望能够更改其他文本的wordpress菜单标签。这是我瞄准的图片：

有人可以指点我的方向吗？任何Jquery技巧？ CSS hack？

Answer 1

您可以这样做：

使用Javascript：

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

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

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

<小时/> CSS版本：

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

Answer 2

纯CSS / HTML解决方案怎么样？以下内容的另一个好处是可以保持正确的内容/样式分离并且占用最少的代码。

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

Wordpress：鼠标悬停时更改菜单标签

2 个答案:

Demo Fiddle