                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS+CSS3实现带预览图幻灯片效果

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

.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;
}

young122849

2015-08-31

源自：JS+CSS3实现带预览图幻灯片效果 2-3

关注问题我要回答

1427

操作

收起

4 回答

Embrace01
2016-12-02

我有一个方法可以用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;
		}