当前位置: 首页 > 知识库问答 >
问题:

指定HTML元素应用动画的正确方法[重复]

谭向晨
2023-03-14

在我的html页面中有三个div及其相应的span子级

<ul>
   <li><div><span class="spinner">A</span></div></li>
   <li><div><span>B</span></div></li>
   <li><div><span>C</span></div></li>
</ul>

当我悬停在div上时,我只希望有子代 的用户能够实际旋转,但是如果没有以下行,我无法完成这样的任务:

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
}

您可以在JSFiddle中看到我的代码

共有1个答案

钱锦
2023-03-14

您的 需要有

下面是具有display属性的代码

null

ul{
    list-style-type: none;
}

li {
    display: inline-block;
}

ul li div{
    width: 100px;
    height: 100px;
    background-color: red;
}

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin{
    from{ 
        transform: rotate(0deg); 
    }
    to{ 
        transform: rotate(360deg); 
    }
}
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title> Main Page </title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <ul>
            <li><div><span class="spinner">A</span></div></li>
            <li><div><span>B</span></div></li>
            <li><div><span>C</span></div></li>
        </ul>
    </body>
</html>
 类似资料:
  • 问题内容: 我有一个名为的自定义HTML5标签。实际上,此标记是由框架在HTML文件内部的某些位置为我创建和插入的。现在,我想修改此标记的CSS,以便在我的CSS文件中: 它确实完成了预期的工作,但这是自定义标签样式的正确方法吗? 我不能向它们添加类,因为我没有创建标签,框架却没有,因此我无法在代码中访问它们,并且我想避免使用Javascript查找这些标签并以这种方式添加类。 我想知道修改自定义

  • 问题内容: 用jQuery 动画 box-shadow 属性的正确语法是哪一种? 问题答案: 直接回答 使用埃德温·马丁的 jQuery插件影子动画,它扩展了方法,你可以简单地使用正常的语法与“boxShadow”的每一个方面- 颜色 ,在 x轴和y偏移 时, 模糊半径_和 _传播半径 -变得活跃起来。它包括多个阴影支持。 改用CSS动画 jQuery通过更改DOM元素的属性进行动画处理,这可能会

  • 问题内容: 我正在 Angular2 应用程序上工作,我需要显示-但是是 HTML 元素。正确的方法是什么? 更新 请注意,这会阻止使用选项,而不是完全渲染。 该 打字稿 组件有一个方法,看起来像这样: 我实际上需要防止元素被单击,而不仅仅是与 CSS 一起出现。我以为我首先需要潜在地绑定到属性,但这是不正确的,因为锚元素没有属性。 我查看并考虑过使用,但是这妨碍了我的工作方式-这是要求的一部分。

  • 我正在开发一个Angular2应用程序,我需要显示—但是<code>禁用<code>一个<code> 更新 请注意,这将阻止使用而不渲染 ,但是这妨碍了我的< code>cursor: not-allowed风格的工作——这是需求的一部分。

  • 我遇到了像失败1这样的错误 必须正确提供名为“userName/contactNumber/emailId/confirmEmailId/status/submit”的正确HTML组件 失败2 名称为“userName”的正确HTML组件必须使用适当的约束 如何解决这个问题?

  • 我创建了一个元素列表,我想更新其中一个列表元素 这是对update方法的调用: 这是更新方法: 在该方法中,我收到警告“从方法生成函数”,并建议“方法‘update\elem’可能是‘static’” 更新列表元素而不收到警告的正确方法是什么?

  • 我正在尝试使用以下代码动态添加和删除隐藏在一些超文本标记语言元素中的属性: 该代码的主要思想是在开始和结束时从第一个图像中删除属性“hidden”(隐藏) 但代码工作不正常:<代码>$()。prop()未按需要添加属性。我应该使用<代码>$()。attr('hidden',true),但在这种情况下,HTML将变为: (带有额外的=“隐藏”字符) HTML有效性POV是否正确?JQuery中是否有

  • 我的AUT有不同的选项卡来测试和验证不同的WebElements,这些选项卡上有几乎相同的属性。我需要验证一个下拉搜索框,并验证下拉列表中的选项。我的脚本找不到这个下拉搜索框,而xpath在firebug中工作得非常好,可以识别搜索框。 显示的错误为: 请告诉我什么可能是错误的,以及为什么Selenium不能使用xpath定位元素,而它在xpath中运行良好。另外,如果我的xpath不正确,请告诉