Question

我有一个非常简单的span元素，其中只包含文字：

<span class="myspan">Some Text</span>

它有一个CSS悬停状态，可以添加一些border：

.myspan:hover { border: 1px solid #BCBEC4; }

我正在使用jQuery在点击时更改span的HTML - 比如更改为下拉列表。点击下拉列表后，我会将HTML更改回原始值。

如：

$('span.myspan').html('Some Text')

所有浏览器都适用，但在Safari上，span仍然具有:hover状态，即使鼠标指针不在范围内。

只有悬停才会删除此状态。

P.S - 它可以在任何其他浏览器上正常工作，但在Safari上它无法正常工作。

编辑：我为此创造了一个小提琴：http://jsfiddle.net/242qd/1/

Answer 1

删除span标记前面的点并尝试

$('span.myspan').html('Some Text')

Answer 2

老实说，我不会说这适用于任何浏览器。因为您只是简单地更改HTML，所以css悬停规则仍然适用于现在（无效地）保存无序列表的span标记。（并且，在这个例子中，这也导致整个列表在每个浏览器中反弹很多，但我想如果有一个背景应用于ul，则可能不是这种情况。）

更重要的是，这很难维护和更新，因为你的html在脚本中。如果我可以提出替代方案： 1.将元素放在DOM中，并使用display：none隐藏它们。 2.使用一个jQuery的许多show / hide方法（show / fadeIn / toggle）来显示和隐藏你想要的任何事件处理程序中的元素。

这里只是一种方法（根据您的示例，因此实际代码可能不完全符合您的确切需求）：

<强> DEMO

$(document).ready(function () {
    $('span.myspan').on('click', function () {
       $(this).next().show(); //this way of traversal works fine for this example, your real code may vary depending on it's structure.
       $(this).hide();        
    });

    $('.links').on('click', 'li', function () {
        $(this).parent().prev().show();
        $(this).parent().hide();
    });
});

HTML：

<span class="myspan">My HTML</span>

<ul class="links">
    <li><a href="javascript:makesome();">Some link</a>
    </li>
    <li><a href="#">Some link</a>
    </li>
    <li><a href="#">Some link</a>
    </li>
    <li><a href="#">Some link</a>
    </li>
    <li><a href="#">Some link</a>
    </li>
</ul>

CSS：

span.myspan:hover {
    border: solid 1px black;
}
.links {
    display:none;
}

哦，是的，这并不需要停止事件的传播（通常应该尽可能避免）。

更改元素的HTML后，CSS悬停状态将保留在Safari中

2 个答案: