Question

这真的很奇怪，代码非常简单，index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:300px;
            list-style:none;
            padding: 0px;
            margin: 0px;
        }
        .box>li{
            width:100px;
            background-color: black;
            opacity:0.7;
            color: white;
            height: 100px;
            float:left;
            text-align: center;
            vertical-align: center;
        }

        .box>li:hover{
            opacity:1;
        }
    </style>
</head>
<body>

    <ul class="box">
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
        <li draggable="true">drag me</li>
    </ul>

</body>
</html>

运行此代码并将一个li元素拖到另一个并删除，然后激活随机li元素的：hover样式但不是鼠标点下的li元素，在safos和chrome中都发生了mac os，而不是发生在Windows中。

你有什么建议可以避免这个错误

Answer 1

看看W3schools的示例可能会对您有所帮助。

Html5拖放意外激活css：悬停样式

1 个答案: