问答详情
源自：2-3 基本界面样式完成

请问为什么将鼠标移到原本看不见的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 12:53

个回答

  • 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
  • ALOH
    2015-09-15 18:09:23

    定位使用relative不就没有占位了？父级元素再进行相应的定位修改会不会有影响

    0
  • luckymore
    2015-08-31 19:14:27

    楼上，正解。虽然看不见，但是在文档流中的位置没变，仍然可以点可以hover

    1
  • cai鸟
    2015-08-31 16:20:42

    opacity是透明度为0，但元素还存在，页面上有占位。

    0