Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如果我将鼠标悬停在parent上,如何触发子类?_Html_Css_Css Transitions - Fatal编程技术网

Html 如果我将鼠标悬停在parent上,如何触发子类?

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{ 光标:指针; } 霍维肯先生{ 显

我想在悬停在父对象上时触发child div。搜索了许多主题,但没有找到真正有用的主题,除了:
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谢谢,我会在以后的作品中记在心里