如何在鼠标悬停时将div中心的图像对齐

时间：2016-07-08 13:55:47

标签： javascript jquery html css

这是我的jsfiddle https://jsfiddle.net/dibyendu/14jkh4qb/。我希望鼠标悬停在主images(Facebook,Twitter)的中心div (class box)（最初会被隐藏），div (class box)与0.1的不透明度

我是否可以仅使用CSS管理它，或者我必须为该

编写一些Js代码

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body { 
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

/* STRUCTURE */

#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
header {
	height: 100px;
	padding: 0 15px;
}
#content {
	width: 290px;
	float: left;
	padding: 5px 15px;
}

#middle {
	width: 294px; /* Account for margins + border values */
	float: left;
	padding: 5px 15px;
	margin: 0px 5px 5px 5px;
}

#sidebar {
	width: 270px;
	padding: 5px 15px;
	float: left;
}
footer {
	clear: both;
	padding: 0 15px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	
	h1 {
		font-size: 2em;
	}
	#sidebar {
		display: none;
	}

}


#content {
	/*background: #f8f8f8;*/
}
#sidebar {
	/*background: #f0efef;*/
}
header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
	/*border: solid 1px #ccc;*/
}

.inner1{
				float:left; 
				width:100%;
				/*background-color:#D9DFD8*/
				height:50px;
				text-align: justify;
				text-justify: inter-word;
				/*padding-left: .5cm;*/
				padding-top: .5cm;
				
				border-style: solid;
				border-width: 1px 1px 0px 1px;
			}
			.inner2{
				float:left; 
				clear: left;
				/*background-color:#CCCCCC;*/
				width:100%;
				height:50px;
				padding-top:.2cm;
				border-style: solid;
				border-width: 0px 1px 1px 1px;
			}
			.output1{
			float:left; 
			width:33%;
			background-color:#D9DFD8;
			height:50px;
			text-align: justify;
			text-justify: inter-word;
			padding-left: .5cm;
			padding-top: .5cm;
			}
			.output2{
			float:left; 
			clear: left;
			background-color:#CCCCCC;
			width:33%;
			height:50px;
			padding-top:.2cm;
			}
			.left-span{
				padding-left: .2cm;
			}
			.right-span{
				padding-left:130px;
			}
			
			.button {
				 font-family: tahoma;
				 font-size: 8pt;
				 line-height: 12px;
				 margin-right: 5px;
				 margin-top: 0;
				 position: absolute;
				 margin-left:-10px;
			}
			.community {
				 
				 margin-top: 15px;
				 margin-left: 15px;
				 position:absolute;
				 top:0;
				 right:8;
			}
			#outputbox{
				display:none;
			}
			
	
			#main-wrap {
				/*background-color: #D9D9D9;*/
			}
			
			#sidebar-left {
				background-color: #d2d2d2;
				border-style: solid;
				border-width: 1px 0px 1px 1px;
			}
			
			#content-wrap {
			/*background-color: #c5c5c5;*/
			border-style: solid;
			border-width: 1px 0px 1px 1px;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-align-content: center;
			align-content: center;
			}
			
			/* sizes */
			#main-wrap > div {
				min-height: 100px;				
			}

			#main-wrap > div { min-height: 100px; }
			

			/* layout */
			#main-wrap {
				/* overflow to handle inner floating block */
				overflow: hidden;
			}
			
			#sidebar-left {
				float: left;
				width: 30%;
			}
			
			#content-wrap {
				float: left;
				width: 50%;
			} 
			#sidebar-right {
				float: right;
				width: 20%;
				/*background-color: #c5c5c5;*/
				border-style: solid;
				border-width: 1px 1px 1px 0px;
				position:relative;
			} 
			.bottom-content {
				position: absolute;
				bottom: 0;
				right: 5;
			}
			.container-item {   display: block;   margin: 5px 0;}
      .box:hover{
        opacity:0.2
      }
＆＃13; 
<div id="pagewrap">

	<header>
		<h1>2 Column Responsive Layout</h1>
	</header>
		
	<section id="content">
			<div class="box">
			
				<div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_1</span></div>
				<div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
				<div>																	
					<img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
				</div>
			
			</div>
			<div style="padding:70px;"></div>
			
			<div class="box" >
				<div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_2</span></div>
				<div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
				<div>																	
					<img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"   />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
				</div>
			</div>
		
			<div style="padding:70px;"></div>
			
			<div class="box">
				<div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_3</span></div>
				<div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
				<div>																	
					<img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"   />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
				</div>
			</div>
		
	</section>
	
	<section id="middle">
		
			<div class="box" >
				<div class="inner1" style="border-left: thick double Green;"><span class="left-span">Cat2_1</span></div>
				<div class="inner2" style="border-left: thick double Green;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
				<div>																	
					<img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
				</div>
			</div>
			<div style="padding:70px;"></div>
		
		
			<div class="box" >
				<div class="inner1" style="border-left: thick double Green;"><span class="left-span">Cat2_2</span></div>
				<div class="inner2" style="border-left: thick double Green;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
				<div>																	
					<img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
				</div>
			</div>
		
			<div style="padding:70px;"></div>
		
			<div class="box">
				<div class="inner1" style="border-left: thick double Green;"><span class="left-span">Cat2_3</span></div>
				<div class="inner2" style="border-left: thick double Green;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
				<div>																	
					<img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
				</div>
			</div>
		
	</section>

	
	
	<footer>
		<h4>Footer</h4>
		<p>Footer text</p>
	</footer>

</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

点击此处：jsfiddle

您可以使用position:absolute

执行此操作

添加了此代码：

.box div:last-child {
  position:absolute;
  top:45%;
  left:0;
  right:0;
  margin:0 auto;
  text-align:center;
  transition:0.3s;
  opacity:0;
}
.box {
  position:relative;
  display:inline-block;
}
.box:hover div:last-child{
  opacity:1;
}

.box:hover div:not(:last-child) {
  opacity:0.2;
}

从您的代码中移除box:hover{opacity:0.2}，因为这样可以使所有内容（包括图片）在悬停时具有不透明度

还有更多方法可以做到这一点。这只是其中一个解决方案。让我知道它是否有效

答案 1 :(得分：0)

用这个替换你的.box div：

<div class="box" >
  <div class="inner1" style="border-left: thick double #ff0000;">
     <span class="left-span">Cat1_2</span>
  </div>
  <div class="inner2" style="border-left: thick double #ff0000;">
     <span class="left-span">10 Customers</span>
     <span class="right-span">2016</span>
  </div>
  <div class="center hidden">
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"   />
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
  </div>
</div>

使用您自己的CSS添加这些CSS：

.box{
  position:relative;
}
.box:hover .center{
  display:block;
}
.hidden{
  display:none;
}
.center{  
  position:absolute;
  text-align:center;
  margin-top:20%;
  width:100%;
  height:100%;
}

答案 2 :(得分：0)

为div存放一个类名（例如图像）。

<div class="box">

    <div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_1</span></div>
    <div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div class="images">                                 
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>

</div>

添加以下CSS：

  .box{
        position: relative;
        display: inline-block;
    }

  .box .images{
    display: none;
    position: absolute;
    left: 40%;
    top: 40%;
  }


  .box:hover .images{
    display: inline-block;
    cursor: pointer;
  }

  .box:hover .inner1, .box:hover .inner2{
    opacity: 0.1;
  }

答案 3 :(得分：0)

只需要添加CSS bello并向图像包装器添加一个类。

https://jsfiddle.net/Dhanck/14jkh4qb/1/ 

.inner-img {
    display: none;
    position: absolute;
    margin-top: 105px;
    margin-left: 135px;
}
.box:hover .inner-img {
    display: block!important;
    opacity:1;
}
.box:hover div:not(.inner-img) {
  opacity:0.2;
}
相关问题
最新问题