                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1488

操作

收起

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