Question

我是CSS和JS的新手。我试图在鼠标悬停上发生两个事件，但它不是在徘徊。这是我的代码

<div class="ht2_icon ht2left" style="background: url(icons/img4.png) no-repeat center;" onClick="popup('#newTeam')"> 
    <span class="tooltip" onmouseover="tooltip.pop(this, 'New Team', {position:0})"> 
        <img src="icons/img4hover.png"/>
    </span>
</div>

我应该让工具提示和其他图像在鼠标悬停上工作但事实并非如此。

Answer 1

要仅在悬停时查看其他图片，请为ht2_icon或ht2left使用单独的css定义：

.ht2left:hover { background: url(icons/img_hover.png) no-repeat center; }

对于午餐多个事件，请使用bind（它标记为jquery，因此这是jquery解决方案，但与其他框架非常相似）

$( ".ht2left" ).bind( "hover", popup('#newTeam'));
$( ".ht2left" ).bind( "hover", method2('#newTeam'));

Answer 2

您应该将HTML，CSS和JavaScript分开并以编程方式绑定回调。你的“干净”HTML看起来像这样（我添加了类popup-trigger）：

<div class="ht2_icon ht2left popup-trigger"> 
    <span class="tooltip"> 
        <img src="icons/img4hover.png"/>
    </span>
</div>

在JavaScript中，您可以向元素添加多个事件侦听器，请检查this example和以下代码：

tooltips[i].addEventListener('mouseover', popTooltip);
tooltips[i].addEventListener('mouseover', doSomethingElse);

如果您使用的是jQuery，则应使用.on() function，它将对与选择器匹配的所有当前和未来元素执行回调。

var $triggers = $(".popup-triggers");
$triggers.on("click", function() {
    // do something
});

鼠标悬停的两个事件

2 个答案: