元素悬停在css3淡出效果中不能正常工作

element hover not working properly in css3 fade effects

本文关键字：常工作工作不能悬停 css3 淡出元素更新时间：2023-09-26

我正在做一个简单的项目，其中单个块元素悬停将显示4倍缩放元素。我是通过纯css和css3过渡实现的。参见jsfiddle演示。将有四个元素，每个元素都有不同的悬停元素。但是，当我将鼠标悬停在它上面时，只显示一个悬停元素，尽管它与该块或元素无关。

检查演示，提出自己的意见。

.main {
  position: relative;
  width: 300px;
  overflow: hidden
}
.main a {
  width: 50%;
  height: 50%;
  float: left;
}
.main a .child {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: gray;
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -ms-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
.main a:hover .child {
  -webkit-transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -ms-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<div class="main">
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>1.Text</h4>
    </div>
  </a>
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>2.Text</h4>
    </div>
  </a>
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>3.Text</h4>
    </div>
  </a>
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>4.Text</h4>
    </div>
  </a>
</div>

JSFiddle上的演示项目

重要的注意事项:如果我使用显示无或块悬停在css3过渡，然后它工作得很好，但我需要淡出效果

这里的问题是，当鼠标悬停在一个元素上时，会显示四个。child元素，但只有最后一个。child是可见的，要解决这个问题，使用visibility属性代替display:

https://jsfiddle.net/f9m1mnce/

.main{
	position: relative;
	width: 300px;
	overflow:hidden	
}
.main a{
	width: 50%;
	height: 50%; 
	float:left;
}
.main a > .child{
	position: absolute; 
	left:0;
	right:0;
	bottom:0;
	top: 0;
    visibility: hidden;
	background: gray;
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;					
}
.main a:hover > .child{
	-webkit-transition: opacity 0.2s ease-in .2;
	-moz-transition: opacity 0.2s ease-in .2 ;
	-ms-transition: opacity 0.2s ease-in .2;
	-o-transition: opacity 0.2s ease-in .2;
	transition: opacity 0.2s ease-in .2; 
    top: 0;
    visibility: visible;
	zoom: 1;
	filter: alpha(opacity=100);
	opacity: 1.0;
}

<div class="main">
	<a href="">
		<img src="http://placehold.it/150x150">
		<div class="child">
			<h4>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
		</div>
	</a>
	<a href="">
		<img src="http://placehold.it/150x150">
		<div class="child">
			<h4>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
		</div>
	</a>
	<a href="">
		<img src="http://placehold.it/150x150">
		<div class="child">
			<h4>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
		</div>
	</a>
	<a href="">
		<img src="http://placehold.it/150x150">
		<div class="child">
			<h4>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
		</div>
	</a>
	
</div>

绝对元素与其父相对元素相关联，在你的演示中在你的演示中你需要设置相对于的位置一个标签

.main a{
    width: 50%;
    height: 50%; 
    float:left;
    position:relative;
}

您可以尝试使用 ::before

<ul id="content-ul">
    <li>
        <a href="#" target="_blank" titulo="Lorem 1">
            <img src="http://placehold.it/150x150" />
        </a>
    </li>
    <li>
        <a href="#" target="_blank" titulo="Lorem 2">
            <img src="http://placehold.it/150x150" />
        </a>
    </li>
    <li>
        <a href="#" target="_blank" titulo="Lorem 3">
            <img src="http://placehold.it/150x150" />
        </a>
    </li>
    <li>
        <a href="#" target="_blank" titulo="Lorem 4">
            <img src="http://placehold.it/150x150" />
        </a>
    </li>
</ul>

CSS:

#content-ul{ display: block; width: 340px; margin: auto; overflow: hidden; } #content-ul li,#content-ul li a{ display: block; position: relative; width: 150px; height: 150px; float: left; overflow: hidden; } #content-ul li{ margin: 10px 10px ; } #content-ul li a{ text-decoration: none; color: #fff; font-size: 14px; text-shadow: 0 1px 0 #000; font-weight: bold; border-radius: 4px; } #content-ul li a img{ border-radius: 4px; } #content-ul li a:before{ visibility: hidden; content: attr(titulo); position: absolute; line-height: 250px; float: left; width: 150px; height: 150px; background: rgba(0,0,50,.5); border-radius: 4px; overflow: hidden; text-align: center; font-size: 25px; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } #content-ul li a:hover::before{ -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; zoom: 1; filter: alpha(opacity=100); opacity: 1.0; visibility: visible; }
工作演示
下面是基于你的代码的更新:
HTML:

<div class="main"> <a href="" content="1Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> <a href="" content="2Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> <a href="" content="3Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> <a href="" content="4Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> </div>
CSS:

.main{ position: relative; width: 300px; overflow:hidden } .main a{ width: 50%; height: 50%; float:left; } .main a:before{ visibility: hidden; content: attr(content); position: absolute; line-height: 250px; float: left; width: 150px; height: 150px; background: rgba(0,0,50,.5); border-radius: 4px; overflow: hidden; text-align: center; font-size: 25px; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .main a:hover::before{ -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; zoom: 1; filter: alpha(opacity=100); opacity: 1.0; visibility: visible; }
工作演示

相关文章：
Javascript:selenium Web驱动程序isDisplayed(）不工作

jQuery UI自动完成突然停止工作

AngularJS UI路由器不能像ng路由器那样工作

HTML5音频加载和播放获胜'我不能在iPad上工作

JavaScript打印功能使日历停止工作

Javascript.getHours(）工作不正常

为什么这在IE中的工作方式与在Firefox中不同

视频HTML没有'无法在Internet Explorer 11上工作

扩展移相器按钮类不工作

Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的

谷歌地图不是以HTML显示，而是在JS Fiddle上工作

正在尝试使用if和else添加类，但无法正常工作

Jquery FadeIn FadeOut 只工作一次

Foreach无法在Typescript中工作

另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作

为什么不是't窗口.恢复正常工作吗?(javascript/jquery）

JS可以在Chrome中工作，但不能在Firefox中工作

ajaxToolkit PopupControlExtender不工作.过时的

HTML标记在脚本标记中工作

javascript扫雷器floodfill算法不能正常工作