请问为什么将鼠标移到原本看不见的img上，也能触发a的hover事件，使得img显示出来-慕课网

请问为什么将鼠标移到原本看不见的img上，也能触发a的hover事件，使得img显示出来

来源：2-3 基本界面样式完成

young122849

2015-08-31 12:53

.ctrl-i img
{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
-webkit-box-reflect: below 0 -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%,transparent),
to(rgba(0,0,0,0.8))
);
opacity: 0;
-webkit-transition: all,0.3s;
}
.ctrl-i:hover
{
background-color: rgba(0,0,0,0.8 );
}
.ctrl-i:hover img
{
opacity: 1;
bottom: 13px;
}

写回答关注

4回答

Embrace01: 2016-12-02 07:43:34

我有一个方法可以用visibility 这个属性

.slider .ctrl .ctrl-i img{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 50px;
			z-index: 10;
			opacity: 0;
			-webkit-transition:all 0.8s;
			-o-transition:all 0.8s;
			transition:all 0.8s;
			visibility: hidden;


		}
		/*hover到控制按钮*/
		.slider .ctrl .ctrl-i:hover{
			background: #333;
		}

		.slider .ctrl .ctrl-i:hover img{
			bottom: 13px;
			opacity: 1;
			visibility: inherit;
		}

0 0