CCS \ HTML - Spry菜單子菜單改變懸停的文字

我有一個輕快菜單，它有一個下拉菜單，當你將鼠標懸停在菜單按鈕上時，我想要改變文本。因此，當您打開下拉菜單並突出顯示文本從1到one之間的某個菜單項時，會看起來如此。這可能嗎。CCS HTML - 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。

那麼讓我總結一下我的問題。當您突出顯示其中一個子菜單項時，如何使我的快捷菜單子菜單的文本發生更改，我需要做些什麼。

我已經做了一些關於這個網站的研究，沒有運氣。我也看看Adobe的四分頻以及輕快菜單上的文檔。在Google上也是如此。

如果有人可以分享一些關於這個問題的見解將是偉大的。

更新

我發現有關更改與jQuery和mouseover但是這將是一切有23個不同的子菜單，或者是說，只有這樣才能輸入一個痛苦的文本的文章？

來源

2014-01-27 apples

將翻轉文本放在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/

來源

2014-01-27 23:11:06

其不改變文本。 – apples

是的它是︰http://jsfiddle.net/ryanwheale/p6Zwa/ –

我是否調用jquery錯誤'' – apples

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

});

}）;

來源

2014-01-27 22:52:53

因爲沒有做得很好。 – apples

你喜歡當你突出顯示1子菜單鏈接的數字文本將是一個？是？ –

是多數民衆贊成在我想 – apples

我覺得你可以使用：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語句陣列和改變它。

來源

2014-01-27 23:05:19 David

CCS \ HTML - Spry菜單子菜單改變懸停的文字

回答

相關問題