如何让“主要内容”在“悬停”上移动，并在伪元素之前/之后保持静态？
要实现“主要内容”在悬停时移动，同时保持伪元素在之前/之后的位置不变，可以使用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：伪元素，设置为绝对定位，固定在容器的特定位置。
应用场景
这种效果常用于按钮、卡片或其他需要突出显示主要内容的组件中。通过悬停时移动主要内容，可以吸引用户的注意力，同时保持伪元素的静态位置，增强视觉效果。
参考链接
希望这个示例能帮助你理解如何实现这种效果。如果有任何进一步的问题，请随时提问！
相关·内容
理想的做法是使“支持”按钮移出初始位置，而黑色背景仍保留在相同的位置。 附言:这是我第二次使用这个网站。如果我没有在这里找到最合适的布局，我很抱歉，非常感谢您的时间和帮助！！ div { margin: 100px auto;}
background-color: rgb(202, 129, 27);}
content: ""; width
浏览 11提问于2021-11-19得票数 2
回答已采纳
一些移动用户在iPhone 11上体验奇怪行为的奇怪情况如何使用button element最好地强制/更改DOM状态？true我们希望执行一些JavaScript，以便上面的命令返回false
也许修复代码会附加到tap event或click event__上。在发布任何解决
浏览 1提问于2021-05-06得票数 0
2回答
我试图在CSS中创建一个自定义工具提示实现，它的工作非常得体，但我遇到了一个问题。目前，悬停在工具提示上仍然保持打开工具提示，即使我没有在原始元素上徘徊。使用负margin-bottom允许其他东西在元素中占用空间，就好像元素不存在一样。然而，:hover伪类显然仍然适用.
这是我想做的事情的演示。我想让下面演示的工具提示不持久化任何悬停状态。请注意，将工具提示文
浏览 6提问于2020-04-24得票数 1
回答已采纳
1回答
我想要的是在悬停时打开某些东西，但是我不确定如何在移动设备上只使用CSS来实现这一点。在之前检查了之后，我确认了我部分知道的事实:某些移动浏览器和设备在单击元素时将使用:hover伪类，这将允许我以我想要的方式打开下拉列表。其他人说:active也能工作。我在一条规则中同时使用:focus来覆盖尽可能多的环境和情况，但我不确定这在许多设备上都能很
浏览 2提问于2016-09-05得票数 3
回答已采纳
当用户悬停在项目上时，是否可以仅使用CSS来展开项，并将其保持到用户悬停在另一项上？
我尝试过转换，这些转换将继续打开或展开和关闭，但不展开，等待另一个操作，然后重新关闭项目。
浏览 11提问于2014-11-24得票数 0
回答已采纳
1回答
我的网页在iPads上有一个非常奇怪的行为(仅限于)。我的web应用程序是基于AJAX加载的。因此，页面的某些部分，如过滤器和主线框，是静态的，但是计算出来的主要内容是通过AJAX加载的。在内容中，用户检查过的过滤器选项由div元素(过滤器芯片)表示，就像在ebay等其他页面中一样。用户可以通过X选择这样的芯片取消筛选，或者只需单击静态内容上的filter复选框。此外，在芯片之后还有一个链接，以便一次重置/删除所有筛选器选项。
在</
浏览 1提问于2018-04-13得票数 1
回答已采纳
当顶层链接悬停时，它们就会出现，但是当您尝试单击其中一个链接时，它们就会消失。
我们已经有几个月没有更新这个站点了，他们在上一次部署之后一直在工作，所以这可能是Chrome更新的结果吗？有谁知道在Chrome中是什么阻碍了子菜单的正常工作吗？
浏览 6提问于2017-04-19得票数 1
回答已采纳
1回答
这在Firefox上不会发生，但在Chrome和IE上会发生。我所拥有的是一个<input>元素，它可以在您键入时生成搜索建议。建议在以下三种情况下显示:输入处于活动状态、鼠标悬停在输入上或鼠标悬停在搜索结果上。
搜索结果使用css转换来隐藏/显示，所以我将max-height设置为500px (比列表更大)和0。我已经创建了一个click事件(使用jQuery)，这样当您单击其中一个结果时，就会在搜索结果中添加一个类以使其隐藏，
浏览 0提问于2013-06-15得票数 0
回答已采纳
我有以下两个css选择器： cursor: pointer; cursor:pointer;它们都有相同的功能(我猜)，但是它们之间有什么性能差异吗？哪一个更“优雅”呢？
浏览 4提问于2017-07-19得票数 1
回答已采纳
2回答
使悬停功能与移动设备兼容
、、、
所以我开发了一个网站，并创建了一个功能，当你将鼠标悬停在一个框上时，它会显示文本，但是当我在移动设备上测试我的网站时，你不能在没有光标的情况下悬停，如果我点击了这个框，它也不能识别点击，那么我如何才能使它兼容，这样如果在移动设备上，只需点击一下，它就可以正常工作 position: absolute;
top: 100%;
浏览 2提问于2019-12-30得票数 0
使用CSS，我有一个块样式的<a>元素，当它悬停时，将自己重新定位到左边的5px上，然后留下一个阴影： display: inline-block; top: -5px; left: -5px;问题:在悬停期间，当<a>块从光标跳出5 5px时，光标实际上不再在
浏览 10提问于2012-03-28得票数 0
回答已采纳
我正在使用一个导航栏，它(在桌面布局中)将其所有元素显示在一行中。它从不包装。我简单地设置了flex-flow: row nowrap;，它运行得很好：现在，在移动平台上，其中一些项目将被放置在上面的第二行中，只有在悬停/单击底部行时才会显示。到目前为止，我的进展是使用.hide-on-mobile;标记这些隐藏项，并在其上设置order: 2;和display: none;，以便总是显示的项位于前面。
浏览 3提问于2020-10-19得票数 0
回答已采纳
按以下方式进行：
这里的任何人谁知道哪个浏览器做得对，以及如何使一个浏览器模仿另一个浏览器的行为？对于当前的场景，我想知道:hover如何避免在
浏览 3提问于2016-09-07得票数 2
回答已采纳
1回答
我如何缩短内容的高度，使其保持在页脚之上，以便渲染真实的内容高度(同时保持100%)。为了说明这一点，我在这里提供了一个有效的示例：
当您使用Firebug将鼠标悬停在元素上时，您将看到主要内容实际上位于粘性页脚的下面。我只需要在不切断顶部的情况下将其向上移动，但我所有的尝试都失败了。
浏览 0提问于2012-05-28得票数 0
回答已采纳
我的站点的index.html页面中有以下代码，当页面加载时，它会在HTML5画布上绘制一些图像：
...drawGameElements();虽然这在一定程度上是可行的，因为它在画布顶部为“记分栏”绘制了一条线，并在画布左侧的水平线上方写下了此外，只要我点击画
浏览 1提问于2012-12-12得票数 0
我正在通过Cordova开发一个应用程序，并在Chrome移动检查器和我的nexus5上进行测试，我遇到了响应定位元素的问题，当在chrome-test视图和设备本身之间移动时，让它们停留在同一位置。主要的问题是找到一个一致的高度单位，我可以用来使用级联页边距底部来定位元素。页眉或页脚就可以了，这是我不能保持位置的主要内容。例如，在这个随机的应用程序主屏幕上，我抓取了google (参见下面的链接)，我如何将这些按钮
浏览 1提问于2015-01-13得票数 1
2回答
这个问题非常简单--我在导航中有一个锚，它生成一个箭头字符：：在CSS中的伪内容之后，当它悬停/鼠标移动时：但是，当鼠标发出鼠标，然后在下拉式菜单中的另一个锚上悬停时，该角色显然会消失： color: #ccc; padding: 10px 15px;}由于导航元素
浏览 2提问于2017-02-22得票数 0
回答已采纳
我正在尝试重新创建在中显示的效果，在站点顶部的三个大面板上有一个彩色的底部边框。当您在面板上悬停时，底部边框的高度在动画效果中会稍微大一些。这是我相信的代码所产生的效果，仍然混淆了什么:之后做。
浏览 5提问于2016-04-28得票数 1
回答已采纳
2回答
我只是一个对HTML，CSS，PHP，javaScript的初学者。我的下拉菜单到导航栏不起作用。当我把鼠标放在导航栏的链接上时，没有下拉菜单。需要某个人的帮助。 width:1060px; padding:0px 0px 0px 0px; }
height:25px;
浏览 2提问于2014-07-27得票数 0
回答已采纳
我正在开发一个交互式元素，要求用户按正确的顺序排序段落，方法是单击一个段落，然后单击第二段，在第二个段落之前或之后插入第一个段落(取决于他们是向上还是向下移动一个段落)。我的问题是，当一个段落被移到另一个地方时，单击的第二段的悬停状态保持活跃--尽管该段没有被悬停。这会在鼠标移动之前发生，此时正确的段落将显示悬停状态。
例如，点击第1段，然后点击第2段。段落切换位置，但是悬停状态<
浏览 1提问于2013-01-07得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
