hover 相关问题

我有两个嵌套的当我将鼠标悬停在 . 上时，我想更改 .parent 的背景我有两个嵌套的<div>的 <div class="parent"> <div class="child"></div> </div> 当我将鼠标悬停在 background 上时，我想将 .parent 更改为 .parent。当我将鼠标悬停在 background 上时，我希望 .child 再次恢复正常。例如，当我将鼠标悬停在内部区域上时，我希望外部区域返回到其原始（灰色）状态： .parent { width: 100px; height: 100px; padding: 50px; background: lightgray; } .parent:hover { background: lightblue; } .child { height: 100px; width: 100px; background: darkgray; } .child:hover { background: lightblue; } <div class="parent"> <div class="child"></div> </div> 我想保留这个 <div> 结构，并且我不需要 JavaScript 解决方案（我知道 JavaScript 解决方案，但我想保留它纯 CSS）。这不是“将鼠标悬停在子对象上时如何设置父对象的样式”的重复。当鼠标悬停在孩子上方时，我不想设置父母的样式。基本上你不能：如何在悬停子元素时设置父元素的样式？但是一个技巧是使用同级元素： http://jsfiddle.net/k3Zdt/8/ .parent { width: 100px; height: 100px; padding: 50px; } .child { height: 100px; width: 100px; background: #355E95; transition: background-color 1s; position: relative; top: -200px; } .child:hover { background: #000; } .sibling { position: relative; width: 100px; height: 100px; padding: 50px; top: -50px; left: -50px; background: #3D6AA2; transition: background-color 1s; } .sibling:hover { background: #FFF; } <div class="parent"> <div class="sibling"></div> <div class="child"></div> </div> 你可以欺骗一些东西；）基本上，对子 div 使用 :before 伪元素，其大小相同；当鼠标悬停在子 div 上时，放大 :before 伪元素以覆盖父 div 区域；这会导致父 div hover 效果下降，然后回到原来的状态。还涉及到 z-index 的精确组合。演示：http://jsfiddle.net/gFu8h/黑魔法（tm） .parent { width: 100px; height: 100px; padding: 50px; transition: background-color 1s; background: #3D6AA2; position: relative; z-index: 1; } .parent:hover{ background: #FFF; } .child { height: 100px; width: 100px; background: #355E95; transition: background-color 1s; position: relative; } .child:hover { background: #000; } .child:before{ content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; transition: background-color 1s; } .child:hover:before{ top: -50px; bottom: -50px; left: -50px; right: -50px; background: #3D6AA2; } <div class="parent"> <div class="child"></div> </div>

css hover

回答 2 投票 0

使用悬停输入在 Shiny 中注释 ggplot？

我正在开发 Shiny 应用程序。我的应用程序中的图之一是随时间推移芝加哥驱逐的面积图。我在图表上有数据中峰值和最新值的永久注释（2012 ...

r ggplot2 shiny hover annotate

回答 1 投票 0

如何将自定义数据添加到绘图散点图箱图中

我正在使用 go.Scattermapbox 在地图上显示不同的气候测量站。现在我想通过使用悬停模板com中的自定义数据在悬停中包含多个不同的值...

python hover plotly

回答 2 投票 0

设置悬停在 GridView 列标题上的背景颜色

应该足够简单和常见：我想覆盖 GridView ColumnHeader 上的悬停颜色。所以我使用、a 和 a ，...

wpf xaml listview hover

回答 1 投票 0

CSS3 SVG 简单过渡：鼠标悬停时出现和消失

我正在尝试使用两个项目进行简单的CSS3过渡：一个svg框（代表svg绘制的徽标）和其后面的标签（代表标题名称标签）。默认情况下只有盒子... 我正在尝试使用两个项目进行简单的 css3 过渡：一个 svg 框（代表 svg 绘制的徽标）和其后面的 <p> 标签（代表标题名称标签）。默认情况下，仅应显示该框，而应隐藏文本。当鼠标悬停在 SVG 框上时，该框应通过简单的 CSS 淡入淡出过渡消失（或者甚至更好的阴影模糊以获得加分；-），然后名称标题应在 1 秒内出现焦点（从阴影模糊） . 目前我陷入困境，因为我的代码无法激活鼠标悬停。我在这个阶段做错了什么？ svg:hover p 不是我最后一步的正确选择器吗？以及如何设置过渡淡入淡出效果？ *{margin: 0; padding: 0;} svg{ position: absolute; fill: rgba(0,200,0,1); z-index: 2; top: 0px; left:0px; display:block; } p{ position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); /* hide the title as default */ } svg:hover{ fill: none; } svg:hover p{ color: rgba(0,0,200,1); /* on mouse over svg, show title. // Doesn't work!! */ } <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> <p>Title of this Website</p> </svg>http://stackoverflow.com/questions/ask# 您无法将元素放置在 SVG 内。您应该将 SVG 和段落都放置在容器内，并将悬停效果设置为作用于容器。对于过渡，请在每个元素上使用过渡属性，或者将其放置在父元素的所有子元素上。像这样的东西： <style type="text/css"> * {margin: 0; padding: 0;} .svg-container * { -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; -ms-transition: all 1000ms ease; transition: all 1000ms ease; } svg { position: absolute; fill: rgba(0, 200, 0, 1); z-index: 2; top: 0; left: 0; display: block; opacity: 1; } p { position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); } .svg-container:hover svg { opacity: 0; } .svg-container:hover p { color: rgba(0,0,200,1); } </style> <div class="svg-container"> <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> </svg> <p>Title of this Website</p> </div>

css svg css-selectors hover transition

回答 1 投票 0

有没有办法在元素悬停时将样式应用于 CSS ::first-line 伪类

我一直在为 HTML 标记修改一些 CSS。我面临的问题是已经使用 CSS ::first-line 伪类应用了一种样式。我想要的是改变这个的风格

css css-selectors hover pseudo-element pseudo-class

回答 3 投票 0

hover 相关问题

最新问题