开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让“主要内容”在“悬停”上移动，并在伪元素之前/之后保持静态？

要实现“主要内容”在悬停时移动，同时保持伪元素在之前/之后的位置不变，可以使用CSS的position属性和transform属性。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main-content {
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }

        .container:hover .main-content {
            transform: translateY(-20px);
        }

        .pseudo-element::before,
        .pseudo-element::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #333;
            transition: none;
        }

        .pseudo-element::before {
            top: 10px;
            left: 10px;
        }

        .pseudo-element::after {
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-content">主要内容</div>
        <div class="pseudo-element"></div>
    </div>
</body>
</html>

解释

HTML结构：
- container：包含主要内容和伪元素的容器。
- main-content：主要内容部分。
- pseudo-element：包含伪元素的部分。

CSS样式：
- .container：设置为相对定位，以便其子元素可以相对于它进行绝对定位。
- .main-content：设置为相对定位，并使用z-index: 1确保它在伪元素之上。使用transition属性实现平滑的过渡效果。
- .container:hover .main-content：在悬停时，主要内容部分向上移动20px。
- .pseudo-element::before和.pseudo-element::after：伪元素，设置为绝对定位，固定在容器的特定位置。

应用场景

这种效果常用于按钮、卡片或其他需要突出显示主要内容的组件中。通过悬停时移动主要内容，可以吸引用户的注意力，同时保持伪元素的静态位置，增强视觉效果。

参考链接

希望这个示例能帮助你理解如何实现这种效果。如果有任何进一步的问题，请随时提问！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

「动图」SEO必知负面case网页广告说明

当用户浏览页面时，这个静态的，不动的悬停广告占据了屏幕的30％以上。大面积悬停广告无论用户在页面上移动的位置如何，都会继续阻止页面视图的一部分，从而产生阻碍作用。微信号：shareseo ?...移动prestitial广告会在内容加载之前显示在移动版网页上，阻止用户继续浏览已搜索到的内容。这些弹出窗口的大小从全屏到部分屏幕都有所不同。它们也可能显示为阻止用户访问主要内容的独立页面。...当移动网页上的广告占据网页主要内容部分的垂直高度的30％以上时，无论这些广告是文字广告，视频广告还是静态广告，都会产生颠覆性的广告体验。这包括“悬浮”广告和内嵌广告。...这些广告占据了页面的30％以上，并浮在页面主要内容的顶部，阻碍了用户的正常浏览。结果可能会让用户反感，因为它掩盖了用户试图浏览的内容。 8 大面积的悬停广告 ?...大面积悬停广告无论用户在页面上移动的位置如何，都会继续阻止页面视图的一部分，从而产生阻碍作用。

2.1K7 0

CSS中鼠标滑过图片放大效果

同时你也可以在此基础上扩展它，比如给图片加投影和边框等。整一个图片放大特效还是比较酷的。但在写代码之前，我们要做的就是：悬停在上面的卡应该在保持长宽比的同时展开。...CSS3中鼠标滑过图片突出放大效果悬停时展开项目我们的下一步是让项目在悬停时展开。...CSS3中鼠标滑过图片突出放大效果向外移动兄弟元素让悬停项的兄弟项远离悬停项是整个过程中很棘手的部分。我们可以使用的一个CSS特性是一般的兄弟组合器。这使我们可以选择位于悬停项之后的所有同级项。...由于通用的同级组合器仅适用于位于给定选择器之后的同级（没有“向后”），因此我们需要另一种方法。一种方法是在父容器本身上添加其他悬停规则。这是计划：悬停父容器时，请将该容器内的所有项目向左移动。...CSS3中鼠标滑过图片突出放大效果向外移动兄弟元素此时悬停效果看起来更加圆滑，不再那么生硬。需要注意的一点是：此最终版本正在使用:focus和:focus-within伪类来支持键盘导航。

8.4K1 0

CSS 下拉菜单与 focus

focus 伪类 focus 伪类 :focus 表示被点击、触摸或 tab 选中的元素，笼统地说就是「获得焦点」的元素。当初实现这个需求的时候同样考虑过采用 :hover 或者 :active。...hover 算是比较熟悉的了，在 PC 上鼠标悬停于此时 :hover 伪类生效，比如链接的样式正是采用 :hover 实现鼠标经过时反馈，以提示用户这是可点击的。...在移动端上稍微有些不同，毕竟所有控制——无论单击、长按抑或划动——都由接触开始，也没有鼠标的「悬停」逻辑，为了方便判定，移动端上若想激活 :hover 也是单击（触摸）。...Spectre 解释是这样让按钮可获得焦点，事实上，并非所有元素默认支持聚焦。本来是可以获得焦点的，只不过要带 href 属性。...其次，当一个元素被聚焦时，点击一般的空白处无法使它失焦。这个问题很迷，在 iOS Safari 上 100% 复现而在 iOS Chrome 上完全无法复现。

5.6K2 0

CSS基础（二）

伪元素概念：使用CSS模拟标签，创建网页中不重要的图用法：找父级，在父级中添加子标签伪元素作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...默认是行内元素 2. content必须添加，即便是空。否则伪元素不生效。 3. 伪元素在网页中无法通过鼠标直接复制粘贴。...一、链接伪类选择器： :hover 鼠标悬停状态 :visited 鼠标点过之后状态 :link 初始状态 :active 鼠标点击时的状态例如：二、焦点伪类选择器：常用于form表单：...让某元素本身在屏幕中不可见。...（如：鼠标hover之后元素隐藏属性： visibility：hidden; (不常用占位置

1.8K2 0

web前端常见面试题

理由如下：当鼠标悬停在未访问的链接上时，:link 和 :hover 都会命中，如果 :hover 在 :link 之前声明，那么(:hover)就会被覆盖；当鼠标悬停在已访问的连接上时，:visited...和 :hover 都会命中，如果 :hover 在 :visited 之前声明，那么(:hover)就会被覆盖；当鼠标单击链接时，:active 和 :hover 都会命中，我们大多是想让 :hover...只在悬停时展示样式，按下鼠标时使用 :active 样式，因此 :active 在 :hover 之后声明；综上，:hover 应在 :link 和 :visited 之后，在 :active 之前...比如： blur 元素失去焦点时触发，focusout 事件也是失去焦点时触发，但可以冒泡； focus 元素获取焦点时触发； mouseenter 鼠标移动到元素上时会触发该事件，与之对应的是 mouseover...，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。

2.3K2 0

前端如何提高用户体验：增强可点击区域的大小

举个例子，在WCAG准则2.3.2中规定：网页不包含任何闪光超过3次/秒的内容。用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。...我把鼠标悬停在按钮上，光标仍然是一个指针，这很好。不过，我也可以选择文本和悬停时，有一个文本光标!如果使用了正确的元素，就不会发生这种情况。 ?...也就是说，可点击区域仅在文本上，如下图所示： ? 解决方法：删除元素的 padding，并将其移动到元素通过添加display: block使a标签的宽度等于其父链接的宽度。...使用伪元素来增加可点击区域仅通过改变元素的宽度和高度或使用padding，并不总是能够使可点击区域变大，这时候就需要伪元素救场了。...这个想法是，伪元素属于其父元素，因此当我们创建具有特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域。

4.8K2 0

超链接的lvha原则

在指定元素内容结尾的位置生成一个元素（同上）伪类与伪元素最大的区别是要选择的目标内容是否存在于DOM上，存在就是伪类，不存在就属于伪元素。...，鼠标经过超链接时或悬停在超链接上时，这个超链接就处于hover状态 */} a:active {/* 处于激活状态的超链接，鼠标在超链接上按下时 */} 其中focus, hover, active不太好区分...，否则最后鼠标划过时不会表现出hover样式（根据层叠规则，先声明的hover会被focus覆盖掉）因为focus, hover, active3个状态有重叠，所以建议保持特定的声明顺序，让层叠结果符合样式表编写者的预期...:link:hover :visited:hover /* 要求顺序位于上2行之后 */ :link:active :visited:active /* 或者替掉上2行不要求顺序 */ :link:...hover:active :visited:hover:active 展开之后就没有重叠状态了，让每条规则都变成严格互斥的，自然就没冲突了 P.S.注意：因为IE6-不能正确处理组合伪类，只认最后一个，

3.5K3 0

提升CSS技能：深入理解 : 和 ::，让你的选择器更强大

这些条件可以包括用户交互，比如悬停在一个元素上或点击一个链接，甚至可以是存储在浏览器中的信息，比如已访问的链接。使用伪类，我们使用冒号（ : ）符号将其附加到CSS选择器的末尾。...这是一个例子： a:hover { color: red; } 在上面的代码片段中，我们正在针对 a （锚点）元素进行操作，并在用户将鼠标悬停在其上时将其颜色设置为红色。...要探索CSS中可用的伪类的全部范围，你可以参考MDN上的详尽文档。伪元素（ :: ）既然我们已经了解了伪类，那么现在让我们把注意力转向伪元素，它们在CSS选择器中用双冒号（ :: ）表示。...一个常用的伪元素是 ::before 。它允许我们在元素内容之前插入内容。...这种技术可以用于向布局添加装饰性或信息性元素。同样地， ::after 伪元素在元素内容之后插入内容。

6733 0

一个侧边栏导航组件实现思路

，只有在“移动”视口为540px 或更小时才能切换。...540px 将是我们在移动交互式布局和静态桌面布局之间切换的断点。伪类一个链接将 url 散列设置为 #sidenav-open，另一个设置为 empty('')。...现在，当我们的 sidenav 滑动打开和关闭，如果用户喜欢减少运动，我立即移动元素进入视图，保持没有运动的状态。...为了将移动设备上 Sidenav 的默认状态设置为屏幕外状态，我将元素的位置设置为： transform: translateX (- 110vw); 注意，我在典型的屏幕外代码 -100vw 中添加了...:is(:hover, :focus) 这个方便的 CSS 函数式伪选择器可以让我们通过分享焦点快速地包容我们的悬停样式。

3.6K4 0

伪元素动画和转换的例子

一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。今天，我们将尝试动画和伪元素（：之前和之后）的转换，我们将发现它们的潜力。...优点简化和优化HTML标记利用CSS3的能力有助于设计缺点只支持Firefox，IE10和最近的Chrome浏览器（请参阅此更新的支持表了解更多信息）在移动浏览器中不起作用伪元素不能由ID...在这最后一个例子中：在伪类之前像父亲一样具有相同的宽度。为了不会有意外的溢出问题，我们将使用“继承”值。例2 在这个例子中，我们将通过使用转换创建一个悬停效果。...您必须一次只使用一种颜色，以避免在触发悬停时通过重叠来避免不必要的颜色混合。例3 我们怎么敢敢忽略那些不可或缺的微调加载动画呢！这里的想法是通过旋转合并颜色。这很简单！...我们将使用一个元素的生物的眼睛。在悬停我们激活翅膀动画和身体明星提升。这是最后一个例子！总之，伪元素是一件好事，将它们与动画和转换相结合，可以创建一些有趣的效果，而不需要使用太多的标记或图像。

1.3K5 0

前端学习(10)~css学习：选择器：伪类

伪类（伪类选择器）伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。静态伪类和动态伪类伪类选择器分为两种。（1）静态伪类：只能用于超链接的样式。...如下： :link 超链接点击之前 :visited 链接被访问过之后 PS：以上两种样式，只能用于超链接。（2）动态伪类：针对所有标签都适用的样式。...如下： :link “链接”：超链接点击之前 :visited “访问过的”：链接被访问过之后 :hover “悬停”：鼠标放到标签上的时候 :active “激活”：鼠标点击标签，但是不松手时。...对应的代码如下： /*让超链接点击之前是红色*/ a:link{ color:red; } /*让超链接点击之后是绿色...动态伪类举例下面这三种动态伪类，针对所有标签都适用。 :hover “悬停”：鼠标放到标签上的时候 :active “激活”：鼠标点击标签，但是不松手时。

1.1K2 0

全栈之前端 | 11.CSS3基础知识之列表链接学习

list-style-position 属性：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。...cursor 属性 - 设置鼠标指针悬停在元素上的样式 :link 伪类 - 默认链接状态 :visited 伪类 - 已访问链接状态 :hover 伪类 - 鼠标停留选中链接状态 :focus 伪类...cursor 属性 - 设置鼠标指针悬停在元素上的样式描述: 此属性设置光标的类型（如果有），即在鼠标指针悬停在元素上时显示相应样式。...标签元素有多种链接状态，使用不同的伪类来对应每一个状态的样式，下面我们简单看看链接状态的语法，不过在学习之前，我们先来看看默认的的链接样式。...:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。

1551 0

SAO UI Plan -- SAO Utils WEB 2.0

通过悬停2级菜单显示3级菜单。优化显示逻辑，识别边缘调整菜单出现位置。确保主要内容完整可见。优化显示逻辑，新增拖动动作监听。可以通过点按拖动菜单调整菜单位置。...大概只花了半天摸鱼时间，就基本实现了球形样式UI和悬停变色效果，得益于之前做右半边的经验，不管是构建主体还是引入图标都是顺风顺水。然后在追番考古时发现左侧菜单还有一个属性面板的界面。OK，话不多说。...一开始是在静态页面上写的纯静态效果，依靠hover动作控制显隐属性。但是这就导致我遇到了一系列问题。...网上的参考内容都是针对于子菜单在父级元素内部的情况，那确实可以靠hover轻松搞定，但是我设置了一堆偏移量和伪类，导致子菜单和父菜单关键的连接轴是个伪类，hover无效啊喂！。...因为全部都是触发类函数，在监听到相应的点击或悬停事件之前不会执行，所以甚至不会有加载完成后执行脚本的那段阻塞时间。

2.1K2 0

（你也不想那个啥也不懂的测试嘲笑你吧）H5开发过程中那些不要碰的CSS选择器

在开发针对移动设备的H5页面时，开发者往往会遇到各种挑战，尤其是当内容需要在不同的Web浏览器和WebView中呈现时。...::after 和 ::before 这些伪元素选择器用于在元素的内容之前或之后插入内容。...:hover 尽管:hover在桌面浏览器中非常有用，用于改变鼠标悬停在元素上时的样式，但在触摸设备上，特别是在WebView环境中，:hover可能会导致不可预测的行为。...替代方法：避免在移动端UI中依赖:hover伪类。考虑使用触摸事件处理器来改变元素的样式，或设计一个不需要:hover状态的UI。...替代方法：避免对文本选择样式做太多定制，以保持更好的兼容性和用户体验。 10. :disabled 和 :enabled 这些伪类选择器用于基于表单元素的可用状态来应用样式。

1521 0

【动画进阶】极具创意的鼠标交互动画

并且，由于我们设置了 body 的颜色，所以在动画的一开始，伪元素白色的背景色与 body 的白色通过混合模式叠加直接变成了黑色。...利用 cursor 修改鼠标样式 cursor CSS 属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。...，判断当前鼠标是否悬停在我们需要进行吸附扩大动画的的元素上通过 mouseout 事件，判断鼠标是否离开目标元素如果鼠标悬停在目标元素上，则计算当前吸附的目标元素的高宽、元素的 border-radius...，才复原模拟的鼠标元素的大小，并且让其重新跟随鼠标的移动而移动本质上而言，通过一句话概括，在整个鼠标元素移动的过程中，如果有悬停到任一元素上，则将外圈鼠标元素 #g-pointer-2 的大小及坐标更改...同时，让其不再跟随真实的鼠标运动而运动。在 mouseout 时，复原外圈鼠标元素的大小及恢复其跟随真实的鼠标运动而运动。

2721 0

简单的聊一聊如何使用CSS的父类Has选择器

最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。...使用:has与:not选择在本节中，我们将介绍如何使用 :has 伪类与 :not 。...导航菜单示例这将引导我们进入我们项目的下一部分，它看起来是这样的：在这里，我们将鼠标移到位置上，您可以看到当我们将鼠标悬停在位置上时，我们拥有的不同位置。...当我们不悬停在位置和员工上时，您会注意到根本没有任何下拉菜单的指示。如果我们为此使用修饰类，我们将不得不手动进入HTML文件并编写代码。然而，我们可以通过 :has 伪类来实现这一点。...然后我们说如果我们有 .awesome__terms: checked ，再次点击复选框时让下一页显示出来。浅色和深色模式示例这是另一个快速示例，展示了如果选中了某个选项，我们可以如何应用它。

1K4 0

如何用最经典的迪士尼动画设计原则赋予 UI 灵性？

当弹球在撞击地面的时候，会呈现出这样的挤压和拉伸。在UI 界面当中，挤压和拉伸则多呈现在按钮类的元素上。...当然，除了按钮之外，它还可以体现在很多其他的交互元素上。 2、预备动作预备动作，通常指的是提前告知用户即将发生的事情，让设计和用户的预期贴合起来。...在 UI 界面当中，表演和呈现方式对应的就是元素的放置位置，以及元素如何进入界面，怎么抓住用户注意力，进行合理的动画编排。...而后者则是「重叠动作」，前一个动作停止之后，某些部分仍然处于运动的状态。在 UI 界面当中，可以让元素在静止之前，调用一个其他的交互和动效，从而让整个动效和交互更加流畅连贯，且自然。...结语在实际的设计过程中，UI动效和交互应当根据实际的情况来灵活调整，让整个 UI 界面在保持自然的情况下，在正确的位置加入不同的交互、动效以及微交互，这回让整个交互和 UI 界面本身的功能更深层地结合到一起

9663 0

前端必看的8个HTML+CSS技巧

悬停放大图片特效悬停放大图片是一个特别吸引眼球的特效，比较常用于可点击的图片。当用户悬停鼠标在图片上，图片会稍微的放大。其实实现这个特效是非常简单的。...filter，让图片变灰或者变深褐色，然后悬停时候出现更加炫酷的颜色变幻。...实现原理一、首先我们禁用了ul的默认符号样式list-style: none 二、在li的:before伪类上给予content内容值，待处理任务使用?...使用content 属性插入的内容都是匿名的可替换元素。 :first-child — CSS伪类表示在一组兄弟元素中的第一个元素。...在CSS中我们不只可以对background背景加入混合模式，我们可以对任何一个元素的自带背景加入混合模式，让你可以做出很多之前没有想过的效果和排版。

1.7K6 1

CSS中的伪类和伪元素

定义伪类 CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮... 如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式： Hello World, and...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素

2.8K1 0

前端学习(22)~css问题讲解

你是如何理解 HTML 语义化的？语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。举例：段落用 p，边栏用 aside，主要内容用 main 标签。...好处：便于开发者阅读和维护有利于SEO：让浏览器的爬虫和辅助技术更好的解析，语义化标签介绍：在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。...width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 控制页面在移动端不要缩小显示...display: block; clear: both; } /* 兼容 IE */ .clearfix { zoom: 1; } 伪类和伪元素的区别是什么...概念上的区别：伪类表示一种状态伪元素是真的有元素。比如 ::after 是真的有元素，可以在页面上显示内容。使用上的区别：伪类：使用单冒号伪元素：使用双冒号

5702 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭