-2

我是 CSS 和 JS 的新手。我试图在 mousehover 上发生两个事件，但它没有工作。这是我的代码

<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>

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

4

2 回答 2

1

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

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

对于午餐多个事件，请使用绑定（它被标记为 jquery，所以这是 jquery 解决方案，但与其他框架将非常相似）

$( ".ht2left" ).bind( "hover", popup('#newTeam'));
$( ".ht2left" ).bind( "hover", method2('#newTeam'));
于 2013-08-06T08:36:56.707 回答
0

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

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

在 JavaScript 中，您可以为一个元素添加多个事件侦听器，请查看此示例和以下代码：

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

如果你使用 jQuery，你应该使用.on() 函数，它将为所有匹配选择器的当前和未来元素执行回调。

var $triggers = $(".popup-triggers");
$triggers.on("click", function() {
    // do something
});
于 2013-08-06T08:48:15.743 回答