鼠标仅在整个行上的文本上方 [英] Mouse Over only on text not on entire row
本文介绍了鼠标仅在整个行上的文本上方的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何只对不在整个行上的文字提供鼠标悬停效果。我尝试了Position(),但是凸轮出空.Below是小提琴链接,
How can I provide Mouse hover effect only on text not on entire row. I tried with Position(), But cam out with empty .Below is fiddle link,
<ul id='ulid'>
<li>Task1</li>
<li>Task2</li>
<li>Task3</li>
<li>Task4</li>
<li>Task5</li>
<li>Task6</li>
<li>Task7</li>
</ul>
<br /><br />
<br /><br />
<div id="show_details"></div>
jQuery(document).ready(function() {
$('ul#ulid li').hover(function() {
$('#show_details').html($(this).text());
}, function() {
$('#show_details').html('');
});
});
请帮助
推荐答案
您的 li
元素不能块显示。有很多方法来处理它,但一个简单的方法只是用跨度包装它们,并触发这些跨度上的 .hover
:
Your li
elements can't be block-display. There are a lot of ways to handle it, but one easy way is just to wrap them with spans and trigger the .hover
on those spans:
<li><span>Task1</span></li>
...
$('ul#ulid li span').hover(function() {
程序: http://jsfiddle.net/xneG5/2/
仅限CSS: http://jsfiddle.net/xneG5/3/
这篇关于鼠标仅在整个行上的文本上方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文