Question

我有一个spry菜单，它有一个下拉菜单我希望当你将鼠标悬停在菜单按钮上时，文本会发生变化。因此，当您打开下拉菜单并突出显示其中一个菜单项时，文本会从1更改为one。这可能吗。

我的spry菜单代码如下：

<ul id="MenuBar1" class="MenuBarHorizontal">
 <li><a class="MenuBarItemSubmenu" href="#>1-5</a>
  <ul>
   <li><a href="#" data-lightbox="'>1</a></li>
   <li><a href="#" data-lightbox="">2</a></li>
   <li><a href="#" data-lightbox="">3</a></li>
   <li><a href="#" data-lightbox="">4</a></li>
   <li><a href="#" data-lightbox="">5</a></li>
</ul>

我css的代码是here 你可以看到菜单看起来像here。

所以让我总结一下我的问题。当您突出显示其中一个子菜单项时，我该怎么做才能使我的spry菜单子菜单的文本发生变化。

我在这个问题上对这个网站做了一些研究，没有运气。我还看了adobe的四分之一以及spry菜单上的文档。以及谷歌。

如果有人可以就这个问题分享一些见解会很棒。

更新

我发现了一篇关于使用jQuery和mouseover更改文本的文章，但是对于有23个不同子菜单的所有内容进行输入会是一种痛苦还是唯一的方法？

Answer 1

将翻转文本放在HTML中的某种属性中。无论如何，这是一个非常好的做法：

<ul id="MenuBar1" class="MenuBarHorizontal">
  <li>
    <a class="MenuBarItemSubmenu" href="#" title="one-five">1-5</a>
    <ul>
      <li><a href="#" data-lightbox="" title="one">1</a></li>
      <li><a href="#" data-lightbox="" title="two">2</a></li>
      <li><a href="#" data-lightbox="" title="three">3</a></li>
      <li><a href="#" data-lightbox="" title="four">4</a></li>
      <li><a href="#" data-lightbox="" title="five">5</a></li>
    </ul>
  </li>
</ul>

然后是一小部分jQuery：

<script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function() {
  $('#MenuBar1').on('mouseover', 'a', function() {
      var $this = $(this);
      $this.attr('data-default-text', $this.text()).text( $this.attr('title') );
  }).on('mouseout', 'a', function() {
      var $this = $(this);
      $this.text( $this.attr('data-default-text') );
  });
});
</script>

添加一个小提琴，表明它正在使用上面的代码：

http://jsfiddle.net/ryanwheale/p6Zwa/

Answer 2

<ul id="submenu">
   <li><a href="#" data-lightbox="one" default-text="1">1</a></li>
   <li><a href="#" data-lightbox="two" default-text="2">2</a></li>
   <li><a href="#" data-lightbox="three" default-text="3">3</a></li>
   <li><a href="#" data-lightbox="four" default-text="4">4</a></li>
   <li><a href="#" data-lightbox="five" default-text="5">5</a></li>
</ul>

您可以尝试使用Jquery：

首先包含jquery库：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

您需要更多测试或将初始值和结果值存储在attributes以获得灵活性

$("#submenu a").hover(function(){
  if($(this).html() != $this.attr('data-lightbox'))
     $(this).html($this.attr('data-lightbox'));
  else
    $(this).html($this.attr('default-text'));

});

}）;

Answer 3

我认为你可以使用：after伪来完成这个。

#menuBar1 li a {
    position:relative;
    display:block;
    width:100px;
    height:30px;
}
#menuBar1 li a:after {
    color:white;
    content:'1';
    position:absolute;
    width:100px;
    line-height:30px;
    text-align:center;
}
#menuBar1 li a:hover:after {
    content:'one';
}

JSFiddle：http://jsfiddle.net/96jFZ/

现在使用JavaScript可能会更容易，因为使用此方法，您必须为每个数字都有一个类或类似的东西，而使用JavaScript，您可以使用数组和if语句来更改它。

CSS \ HTML - Spry菜单子菜单在悬停时更改文本

3 个答案: