正文

通过 CSS 将鼠标悬停在父元素上时显示 :after

 2023-03-06  83

关键词：

【中文标题】通过 CSS 将鼠标悬停在父元素上时显示 :after【英文标题】：Show :after when hovering over the parent element via CSS 【发布时间】：2013-03-07 11:57:06 【问题描述】：

当我将鼠标悬停在父元素本身上时，是否可以 display:block; :after 伪元素？

#myDiv
   position:relative;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:red;

#myDiv:after
   position:absolute;
   content:"";
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:blue;

我累了：

#myDiv:hover #myDiv:after
    display:block;

#myDiv:hover + #myDiv:after
    display:block;

#myDiv:hover > #myDiv:after
    display:block;

但运气不好，这是fiddle。

【问题讨论】：

【参考方案1】：

改成#myDiv:hover::after

您可以使用:after 或::after，但在选择器模块 (3) 中声明后者现在旨在用于将它们与伪类区分开来

【讨论】：

规范说使用:而不是::来实现向后兼容性很好。它指出新的伪元素只能与 :: 一起使用，但旧的伪元素都支持。【参考方案2】：

您正在尝试引用相同的元素，因此您不需要复制 ID 选择器。也不需要使用子选择器，只需使用：

#myDiv:hover:after 
    display: block;

jsFiddle Demo

【讨论】：

仅使用 CSS，将鼠标悬停在另一个元素上时显示 div

】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在<a>元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情

HTML/CSS - 将鼠标悬停在照片上时显示链接

】HTML/CSS-将鼠标悬停在照片上时显示链接【英文标题】：HTML/CSS-Displaythelinkwhilehoveringoveraphoto【发布时间】：2020-12-0416:15:49【问题描述】：我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链... 查看详情

使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情

CSS - 将鼠标悬停在 li 元素上时执行转换（下拉菜单）

】CSS-将鼠标悬停在li元素上时执行转换（下拉菜单）【英文标题】：CSS-performtransitionwhenhoveroverlielement(dropdownmenu)【发布时间】：2013-07-3014:57:45【问题描述】：我正在制作这样的主页：http://jsbin.com/umaguc/1/，我目前正在处理下拉菜... 查看详情

jQuery动画无法悬停

...很简单，但无论出于何种原因都行不通。当您使用jquery将鼠标悬停在父元素上时，我正在尝试为元素内的div容器设置动画。这个想法是，当您将鼠标悬停在父项上时，子div会向下滑动，当您将鼠标悬停时，它会移回原来的位置。... 查看详情

当使用 MUI 样式将鼠标悬停在父级上时，如何更改子级的样式？

】当使用MUI样式将鼠标悬停在父级上时，如何更改子级的样式？【英文标题】：HowdoyouchangeastyleofachildwhenhoveringoveraparentusingMUIstyles?【发布时间】：2020-03-2910:04:58【问题描述】：我在反应中使用MUI。假设我有这些样式的组件：constu... 查看详情

将鼠标悬停在容器上时的 CSS 变换图像

】将鼠标悬停在容器上时的CSS变换图像【英文标题】：CSStransformimagewhenhoveroveracontainer【发布时间】：2011-09-3002:19:44【问题描述】：有没有办法使用CSS制作容器，例如：#p-container.p-categories-item影响该div中的图像？我在图像上有一... 查看详情

当鼠标悬停在没有css的标题上时，如何使缩略图消失？

...将鼠标悬停在图片的div上时，我有一个简单的jQuery代码，通过隐藏一张图片并显示另一张图片来更改帖子的缩略图。当我将鼠标悬停在.thumbs类中标记的查看详情

jQuery CSS 悬停

...】：2010-12-1103:42:55【问题描述】：我有一个CSS菜单，当将鼠标悬停在父li上时，它会设置其颜色，它是子ul（子菜单）。基本上，当您将鼠标悬停在菜单上时，它会改变颜色并保持这种状态，直到您将鼠标悬停在菜单上并且它是... 查看详情

将鼠标悬停在按钮上时如何更改 div 的文本？

】将鼠标悬停在按钮上时如何更改div的文本？【英文标题】：HowdoIchangethetextofadivwhenIhoveroverabutton?【发布时间】：2014-08-0717:01:06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在... 查看详情

将鼠标悬停在图像链接上时显示文本

】将鼠标悬停在图像链接上时显示文本【英文标题】：ShowingTextWhenHoveringOveranImageLink【发布时间】：2013-08-2720:04:16【问题描述】：我已经看过这里(Howtoshowtextonimagewhenhovering?)以找到解决此问题的方法，但它不能100%起作用...因为该... 查看详情

将鼠标悬停在图像上时需要 CSS 效果，以获取另一个图像和/或文本以显示在其上方

】将鼠标悬停在图像上时需要CSS效果，以获取另一个图像和/或文本以显示在其上方【英文标题】：NeedCSSeffectwhenhoveringoveranimage,togetanotherimageand/ortexttodisplayaboveit【发布时间】：2012-02-1719:06:09【问题描述】：我公司的网站上有10个... 查看详情

将鼠标悬停在 ASP.NET 按钮上时显示注释

】将鼠标悬停在ASP.NET按钮上时显示注释【英文标题】：DisplaynoteswhenhoveringoverASP.NETbuttons【发布时间】：2012-10-0602:37:11【问题描述】：我的页面上有许多按钮，我希望在其旁边显示一些注释，说明当它们悬停在任何特定按钮上时... 查看详情

如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？

】如何将鼠标悬停在子元素上而不悬停在CSS中的父元素上？【英文标题】：HowdoIhoveroverachildelementwithouthoveringovertheparentinCSS?【发布时间】：2017-04-1909:59:51【问题描述】：是否可以将鼠标悬停在嵌套的子元素上而不触发父元素上的... 查看详情

ASP 动态菜单子菜单鼠标悬停在子菜单上时消失。

】ASP动态菜单子菜单鼠标悬停在子菜单上时消失。【英文标题】：ASPDynamicMenuSubMenuDisappearsonmouseoverofsubmenu.【发布时间】：2014-04-2718:59:00【问题描述】：我被要求更新和解决问题的网站的子菜单消失时遇到问题（创建的员工不再... 查看详情

将鼠标悬停在标题列数据表上时显示工具提示

】将鼠标悬停在标题列数据表上时显示工具提示【英文标题】：ShowTooltipwhenmouseovertheheadercolumndataTable【发布时间】：2014-03-0910:46:08【问题描述】：当鼠标悬停在表头上时如何显示动态表p:dataTable表头的工具提示以显示表头列的整... 查看详情

将鼠标悬停在 iframe 上时如何显示文本

】将鼠标悬停在iframe上时如何显示文本【英文标题】：Howtodisplaytextwhenhoveroveraniframe【发布时间】：2022-01-2110:53:15【问题描述】：我是新来的，首先要问一个特殊的问题：当用鼠标悬停在iframe上时，应该会出现一个带有文本的透... 查看详情

将鼠标悬停在 Chrome 上时 CSS 图像会移动 [关闭]

】将鼠标悬停在Chrome上时CSS图像会移动[关闭]【英文标题】：CSSimagesmovewhenhoveringoveronChrome[closed]【发布时间】：2013-11-1400:51:56【问题描述】：当我将鼠标悬停在我的任何图像上时，它会稍微向右移动。这只发生在Chrome上。所有其... 查看详情

正文