Question

悬停时是否可以更改锚点的内容？我有这个样本fiddle 我希望在悬停时将关键锚更改为像我的生物一样。还有别的东西也适合家里。内容属性似乎与此无关。

HTML：

<script type="text/ng-template" id="firstDialogId" >

<div class="ngdialog-message">
    <h3>ngDialog template</h3>

</div>
<div class="ngdialog-buttons">

    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="openSecond()">Open next</button>
</div>
</script>

CSS：

<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Home</a></li>
</ul>

Answer 1

听起来真像JS的工作。仅通过伪元素的CSS解决方案：

http://jsfiddle.net/qpdoby91/

.about:before { content: 'About'; }
.home:before { content: 'Home'; }

ul li a:hover:before { content: 'Content'; }

JavaScript解决方案：http://jsfiddle.net/bctaxauo/1/

$('ul li a').hover(function() {
    $(this).data('prevText', $(this).text()).text('New Content!');
}, function() {
    $(this).text($(this).data('prevText');
});

Answer 2

＆＃34;内容属性与:before和:after伪元素一起使用，以插入生成的内容。＆＃34;不是正常的元素。

参考：http://www.w3schools.com/cssref/pr_gen_content.asp

您可以使用jQuery更改它：

$('li a').mouseenter(function(){
    $(this).data('text', $(this).text());
    $(this).text('Content');
}).mouseleave(function(){
    $(this).text($(this).data('text'));
});

http://jsfiddle.net/TrueBlueAussie/s6ao29eg/2/

此版本只会将文本保存到mouseenter上元素的数据中，并在mouseleave上恢复。您也可以使用hover传递相同的两个函数。

e.g。

$('li a').hover(function(){
    $(this).data('text', $(this).text()).text('Content');
}, function(){
    $(this).text($(this).data('text'));
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/s6ao29eg/5/

我注意到其他几个聪明的CSS解决方案已经提供，因此选择取决于您可以更改内容的程度，而不是添加代码。

如果您需要不同的文字，请使用数据属性：

<li><a href="#" data-content="About me!">About</a></li>

e.g。

$('li a').hover(function(){
    $(this).data('text', $(this).text()).text($(this).data('content'));
}, function(){
    $(this).text($(this).data('text'));
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/s6ao29eg/8/

根据要求更新以使用转换（淡入淡出）：

$('li a').hover(function(){
    $(this).stop(true,true).fadeOut(function(){
       $(this).data('text', $(this).text()).text($(this).data('content')).fadeIn();
    });
}, function(){
    $(this).stop(true,true).fadeOut(function(){
        $(this).text($(this).data('text')).fadeIn();
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/s6ao29eg/10/

现在进一步更新规则已经改变：）

由于HTML内容显然无法修改，请使用LI的索引位置以及一组文本项：

var content = ["About me!", "My home!"];
$('li').hover(function(){
    var $a = $('a', this);
    $a.stop(true,true).fadeOut(function(){
       $a.data('text', $a.text()).text(content[$(this).index()]).fadeIn();
    });
}, function(){
    var $a = $('a', this);
    $a.stop(true,true).fadeOut(function(){
        $a.text($a.data('text')).fadeIn();
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/s6ao29eg/11/

在知道无法修改HTML之前使用数组的@MariaMadalina的信用：）

Answer 3

只需隐藏＆＃34;悬停文字＆＃34;当处于正常状态并在悬停时切换显示：

＆＃13;

.menu li:hover .unhover {
  display: none;
}
.menu li:hover .hover {
  display: inline;
}
.menu li .unhover {
  display: inline;
}
.menu li .hover {
  display: none;
}

＆＃13;

<ul class="menu">
  <li>
    <a href="#">
      <span class="unhover">Home</span>
      <span class="hover">Visit home</span>
    </a>
  </li>
</ul>

＆＃13;

Answer 4

制作了一个jquery片段

func checkAndSetDefaultFont ()
{
    let font: UIFont = (NSUserDefaults.standardUserDefaults().objectForKey("defaultFont") as? UIFont)!

    UILabel.appearance().font = font;

    UILabel.appearance().font = font;
}

看看http://jsfiddle.net/s6ao29eg/3/

修改：我对更具可扩展性的解决方案做了一些修改。

$('li#about').hover(function() { $("a", this ).text( "something" ); }, function() { $("a", this ).text( "About" ); });

http://jsfiddle.net/s6ao29eg/9/

Answer 5

您也可以使用jQuery。

在您的li中添加一个ID：

 <li><a href="#" id="about">About</a>

并添加此jQuery代码

 $(document).ready(function(){
    $('#about').hover(function(){
    $(this).text('');
        $(this).text('My Bio');

    });
     $('#about').mouseout(function(){
    $(this).text('');
        $(this).text('about');

    });
});

小提琴链接是：https://developers.facebook.com/docs/graph-api/reference/page/#Reading

如果你有多个李

，也可以这样做

http://jsfiddle.net/sonam185/w5fh140q/

Answer 6

你可以，但你必须使用:before和:after伪元素，以及一些颜色技巧来隐藏原始文本。

ul li a:hover {
    color: transparent;
}
ul li a:hover:before {
    content: "Content";
    position: absolute;
    color: red;
}

顺便说一下，为什么要使用<ul>来嵌套<a>元素？您无论如何都要从列表中删除所有样式。大多数情况下，您需要的只是样式良好的<a>标签;如果您将数据结构化为列表，则只将它们嵌套在列表中，这意味着您可能希望在每个li之前使用项目符号。

Answer 7

简单的Css唯一解决方案

HTML

<ul>
<li><a href="#"> <span class="visible">About</span> <span class="hover"> My Bio</span> </a></li>
</ul>

的CSS

ul { list-style: none; }
ul li a span.hover{
    display:none;}
ul li a:hover span.hover{
    display:block;
}
ul li a:hover span.visible{
    display:none;
}

悬停时锚上的文字会发生变化

7 个答案:

根据要求更新以使用转换（淡入淡出）：

现在进一步更新规则已经改变：）