Javascript 鼠标悬停效果在每个项目上运行
我有5个UL出现在一个页面上。所以,当我将鼠标移到一个图像上时,ULi.e的每个实例都会产生相同的效果。它会更改所有5个事件的HTML 我想在单个UL上执行脚本,以便效果在我鼠标悬停的相应UL上运行,而不是在所有UL上运行 实时代码示例: 提前谢谢。任何帮助/指示都会大有裨益GSA HTML:Javascript 鼠标悬停效果在每个项目上运行,javascript,jquery,hover,Javascript,Jquery,Hover,我有5个UL出现在一个页面上。所以,当我将鼠标移到一个图像上时,ULi.e的每个实例都会产生相同的效果。它会更改所有5个事件的HTML 我想在单个UL上执行脚本,以便效果在我鼠标悬停的相应UL上运行,而不是在所有UL上运行 实时代码示例: 提前谢谢。任何帮助/指示都会大有裨益GSA HTML: <ul class="answerOptions"> <li data-score="0" data-answer="A" class="answer-1">
<ul class="answerOptions">
<li data-score="0" data-answer="A" class="answer-1">
<figure><img src="assets/images/styles/quiz/ques2_A.jpg" alt="" title="" />
<figcaption>Dinner and a movie</figcaption>
</figure>
</li>
<li data-score="1" data-answer="B" class="answer-2">
<figure><img src="assets/images/styles/quiz/ques2_B.jpg" alt="" title="" />
<figcaption>2 words: Laser Tag</figcaption>
</figure>
</li>
<li data-score="0" data-answer="C" class="answer-3">
<figure><img src="assets/images/styles/quiz/ques2_C.jpg" alt="" title="" />
<figcaption>Stroll through the park and a picnic</figcaption>
</figure>
</li>
<li data-score="0" data-answer="D" class="answer-4">
<figure><img src="assets/images/styles/quiz/ques2_D.jpg" alt="" title="" />
<figcaption>Skydiving</figcaption>
</figure>
</li>
<li data-score="4" data-answer="E" class="answer-5">
<figure><img src="assets/images/styles/quiz/ques2_E.jpg" alt="" title="" />
<figcaption>Art gallery and wine tasting</figcaption>
</figure>
</li>
</ul>
<div class="answerItem-1"></div>
不要使用class,使用Id。class hover efects在所有项目上运行,Id在页面上只能是一个。它们全部弹出的原因是因为这一行:$.answerItem-1您正在选择每一个。answerItem-1您有一堆这样的项目。 您需要设置唯一标识符。我会这样做:
<figure rel="q1">
...
<div id="q1" class="answerItem-1"></div>
//jquery code
var q = $(this).attr('rel');
$('#'+q).html($(this).find("figcaption").html());
我认为应该使用客观的概念,使LI标记具有自己的事件处理程序。 只要看看下面的脚本,并请参考您的代码
$('ul.answerOptions').delegate('li.answer-1', 'hover', function(event) {
if (event.type == 'mouseenter') {
console.log('inbound');
var $target = $(this).parents('div.question').find('div.answerItem-1');
var showText = '';
showText = $(this).find('figcaption').html();
$target.html(showText);
} else if (event.type == 'mouseleave') {
var $target = $(this).parents('div.question').find('div.answerItem-1');
$target.html('');
}
});
我不明白,你想让它同时对所有人产生影响吗?@ilight不,我想针对特定的UL一次强调一个答案。如果您看到JSFIDLE链接,它将在可用图形元素的鼠标上方显示这两个选项。
$('ul.answerOptions').delegate('li.answer-1', 'hover', function(event) {
if (event.type == 'mouseenter') {
console.log('inbound');
var $target = $(this).parents('div.question').find('div.answerItem-1');
var showText = '';
showText = $(this).find('figcaption').html();
$target.html(showText);
} else if (event.type == 'mouseleave') {
var $target = $(this).parents('div.question').find('div.answerItem-1');
$target.html('');
}
});