ホバー時に強調表示したいナビゲーションバーにいくつかのボタンがあり、Firefox、IE、Opera では正常に動作しますが、Chrome や Safari では動作しません。しばらく検索していて、ここでスタックオーバーフローのトピックを既に読んでいますが、有効な解決策が見つかりませんでした。
html:
<div class="bgc dropshadow2" id="navbar" >
<ul>
<a href="" alt=""><li class="navButton"><span>Word</span></li></a>
<a href="" alt=""><li class="navButton"><span>Word</span></li></a>
<a href="" alt=""><li class="navButton"><span>Word</span></li></a>
<a href="" alt=""><li class="navButton"><span>Word</span></li></a>
<a href="" alt=""><li class="navButton marginLast"><span>Word</span></li></a>
</ul>
</div>
CSS:
#navbar ul li {
float: left;
height: 24px;
width: 100px;
margin-left: 24px;
margin-right: 8px;
padding: 12px 12px 12px 12px;
text-align: center;
background: rgba(0, 0, 0, .2);
}
jQuery:
$(function(){
$('.navButton').hover( function(){
$(this).css('background', 'rgba(0, 0, 0, .6)');
},
function(){
$(this).css('background', 'rgba(0, 0, 0, .2');
});
});