Html 如果我将鼠标悬停在parent上,如何触发子类?
我想在悬停在父对象上时触发child div。搜索了许多主题,但没有找到真正有用的主题,除了:Html 如果我将鼠标悬停在parent上,如何触发子类?,html,css,css-transitions,Html,Css,Css Transitions,我想在悬停在父对象上时触发child div。搜索了许多主题,但没有找到真正有用的主题,除了:class.parent:hover class.child{}我的主题对于以下主题不重复: 提供的资料来源: html{ 背景:黑色; } #按钮启动{ 位置:绝对位置; 宽度:15%; 身高:10%; 底部:15%; 左:5%; } #imageStart{ 宽度:100%; 身高:100%; } #按钮开始:悬停。hovicon.effect-3.sub-b{ 光标:指针; } 霍维肯先生{ 显
class.parent:hover class.child{}
我的主题对于以下主题不重复:
提供的资料来源:
html{
背景:黑色;
}
#按钮启动{
位置:绝对位置;
宽度:15%;
身高:10%;
底部:15%;
左:5%;
}
#imageStart{
宽度:100%;
身高:100%;
}
#按钮开始:悬停。hovicon.effect-3.sub-b{
光标:指针;
}
霍维肯先生{
显示:内联块;
字体大小:45px;
线高:90px;
光标:指针;
宽度:90px;
高度:90px;
边界半径:50%;
文本对齐:居中;
位置:相对位置;
文字装饰:无;
z指数:1;
颜色:#fff;
}
.hovicon.auto-width{
宽度:自动;
高度:自动;
}
霍维肯:之后{
指针事件:无;
位置:绝对位置;
宽度:100%;
身高:100%;
边界半径:50%;
内容:'';
-webkit框大小:内容框;
-moz框大小:内容框;
框大小:内容框;
}
霍维肯:以前{
说:没有;
字体大小:48px;
线高:90px;
字体风格:普通;
字体大小:正常;
字体变体:正常;
文本转换:无;
显示:块;
-webkit字体平滑:抗锯齿;
}
.hovicon.effect-3{
位置:绝对位置;
底部:-13%;
左:62%;
字号:3.8em;
-webkit转换:颜色0.3s;
-moz过渡:颜色0.3s;
过渡:颜色0.3s;
}
.hovicon.effect-3:之后{
顶部:-2px;
左:-2px;
填充:2px;
z指数:-1;
背景:#fff;
-webkit转换:-webkit转换0.2s,不透明度0.3s;
-moz变换:-moz变换0.2s,不透明度0.3s;
过渡:变换0.2s,不透明度0.3s;
}
/*效果3b*/
.hovicon.effect-3.sub-b、.hovicon.effect-3.sub-b i{
颜色:#fff;
}
.hovicon.effect-3.sub-b:悬停,.hovicon.effect-3.sub-b:悬停i{
颜色:#6969;
}
.hovicon.effect-3.sub-b:after{
-webkit转换:规模(1.3);
-moz变换:比例(1.3);
-ms变换:比例(1.3);
转换:比例(1.3);
不透明度:0;
}
.hovicon.effect-3.sub-b:悬停:之后{
-webkit转换:规模(1);
-moz变换:比例(1);
-ms变换:尺度(1);
变换:比例(1);
不透明度:1;
}
 
你的小提琴几乎正确。我刚刚更改了最后一个选择器,如下所示,它在父div的悬停处显示圆形动画。请尝试下面的css
html {
background: black;
}
#buttonStart {
position: absolute;
width: 15%;
height: 10%;
bottom: 15%;
left: 5%;
}
#imageStart {
width: 100%;
height: 100%;
}
#buttonStart:hover .hovicon.effect-3.sub-b {
cursor: pointer;
}
/* Effect 3 */
.hovicon {
display: inline-block;
font-size: 45px;
line-height: 90px;
cursor: pointer;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
text-decoration: none;
z-index: 1;
color: #fff;
}
.hovicon.auto-width {
width: auto;
height: auto;
}
.hovicon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.hovicon:before {
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hovicon.effect-3 {
position: absolute;
bottom: -13%;
left: 62%;
font-size: 3.8em;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hovicon.effect-3:after {
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
background: #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
/* Effect 3b */
.hovicon.effect-3.sub-b,
.hovicon.effect-3.sub-b i {
color: #fff;
}
.hovicon.effect-3.sub-b:hover,
.hovicon.effect-3.sub-b:hover i {
color: #696969;
}
.hovicon.effect-3.sub-b:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
#buttonStart:hover .hovicon.effect-3.sub-b:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
在子对象上执行的操作悬停在父对象上执行的操作hover@41726c我需要在悬停时触发子类parent@TemaniAfif你的回答对我的情况没有帮助,我希望看到白色的圆圈,同时悬停在一个父div-->(你在child hover上做了什么你在parent hover上做了什么)@TemaniAfif谢谢,我会在以后的作品中记在心里