更改/定位图像翻转链接

时间：2019-04-10 22:52:45

标签： html css

仅使用html和css来实现此大型菜单存在问题。非常接近要复制，请转到“产品/巨型项目”，然后选择“测试1”或“测试2”。

我希望图像悬停在“测试1”或“测试2”上时发生变化，但是在将其放置在不同的屏幕尺寸上时遇到问题。

我尝试了各种CSS设置；绝对值，像素或％，但不适用于不同的分辨率。我确实在移动设备（理想情况下）中禁用了它

应类似于以下内容： https://codepen.io/arjunamgain/pen/YXBeLJ

如果以此为例，将鼠标悬停在“超级菜单”上，然后将鼠标悬停在“移动”上。我希望左侧的图像可以相应地更改。即，当将鼠标悬停在“移动”上时，我可以拥有一个移动图像。将鼠标悬停在“计算机”上时，我可以拥有计算机映像。

我的代码位于https://codepen.io/codewoed/pen/rbyRWE，尽管我的对齐方式因屏幕分辨率不同而异，但我可以更改图像。 

  body{
	margin: 0;
	padding: 0;
	font: 300 14px/18px Roboto;
	background-image: url('../images/texture.png');
 } 
 *,
:after,
:before {
  box-sizing: border-box
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: table
}

.clearfix:after {
  clear: both;
  display: block
}
ul{
	list-style:none;
	margin: 0;
	padding: 0;
}
a, a:hover, a.active, a:active, a:visited, a:focus{
	color:#fefefe;
	text-decoration:none;
}
.content{
	margin: 0px 0px 0px 0px;
}

.exo-menu{
	width: 100%;
	float: left;
	list-style: none;
	position:relative;
	background: #fff;
}
.exo-menu > li {	display: inline-block;float:left;}
.exo-menu > li > a{
	color: #2e3192;
	text-decoration: none;
	text-transform: uppercase;
	border-right: 1px #FAFAFA dotted;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover{
	background:#009FE1;
	color:#fff;
}
.exo-menu i {
  float: left;
  font-size: 18px;
  margin-right: 6px;
  line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left{position:relative;}
li.drop-down:before {
  content: "\f103";
  color: #fff;
  font-family: FontAwesome;
  font-style: normal;
  display: inline;
  position: absolute;
  right: 6px;
  top: 20px;
  font-size: 14px;
}
li.drop-down>ul{
	left: 0px;
	min-width: 230px;

}
.drop-down-ul{display:none;}
.flyout-right>ul,
.flyout-left>ul{
  top: 0;
  min-width: 230px;
  display: none;
  border-left: 1px solid #365670;
  }

li.drop-down>ul>li>a,
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	color: #fff;
	display: block;
	padding: 20px 22px;
	text-decoration: none;
	background-color: #365670;
	border-bottom: 1px dotted #547787;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	border-bottom: 1px dotted #B8C7BC;
}


/*Flyout Mega*/
.flyout-mega-wrap {
	top: 0;
	right: 0;
	left: 100%;
	width: 100%;
	display:none;
	height: 100%;
	padding: 15px;
	min-width: 742px;

}
h4.row.mega-title {
  color:#eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
 }
.flyout-mega ul > li > a {
  font-size: 90%;
  line-height: 25px;
  color: #fff;
  font-family: inherit;
}
.flyout-mega ul > li > a:hover,
.flyout-mega ul > li > a:active,
.flyout-mega ul > li > a:focus{
  text-decoration: none;
  background-color: transparent !important;
  color: #ccc !important
}
/*mega menu*/

.mega-menu {
  left: 0;
  right: 0;
  padding: 15px;
  display:none;
  padding-top: 0;
  min-height: 100%;

}
h4.row.mega-title {
  color: #eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #547787;
  padding-top: 15px;
  background-color: #365670
  }
 .mega-menu ul li a {
  line-height: 25px;
  font-size: 90%;
  display: block;
}
ul.stander li a {
    padding: 3px 0px;
}

ul.description li {
    padding-bottom: 12px;
    line-height: 8px;
}

ul.description li span {
    color: #ccc;
    font-size: 85%;
}
a.view-more{
  border-radius: 1px;
  margin-top:15px;
  background-color: #009FE1;
  padding: 2px 10px !important;
  line-height: 21px !important;
  display: inline-block !important;
}
a.view-more:hover{
	color:#fff;
	background:#0DADEF;
}
ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #009FE1;
    line-height: 35px !important;
}

ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog{
	left:0;
	display:none;
	color:#fefefe;
	padding-top:15px;
	background:#547787;
	padding-bottom:15px;
}
.Blog .blog-title{
	color:#fff;
	font-size:15px;
	text-transform:uppercase;

}
.Blog .blog-des{
	color:#ccc;
	font-size:90%;
	margin-top:15px;
}
.Blog a.view-more{
	margin-top:0px;
}
/*Images*/
.Images{
	left:0;
   width:100%;
	 display:none;
	color:#fefefe;
	padding-top:15px;
	background:#547787;
	padding-bottom:15px;
}
.Images h4 {
  font-size: 15px;
  margin-top: 0px;
  text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a ,
.flyout-left ul>li>a,
.flyout-mega-wrap,
.mega-menu{
	background-color: #547787;
}

/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover +ul,
li.flyout-right a:hover +ul,
.blog-drop-down >a:hover+.Blog,
li.drop-down>a:hover +.drop-down-ul,
.images-drop-down>a:hover +.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover +.flyout-mega-wrap{
	display:block;
}
/*responsive*/
 @media (min-width:767px){
	.exo-menu > li > a{
	display:block;
	padding: 20px 22px;
 }
.mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:absolute;
}
 .flyout-right>ul{
	left: 100%;
	}
	.flyout-left>ul{
	right: 100%;
}
 }
@media (max-width:767px){

	.exo-menu {
		min-height: 58px;
		background-color: #fff;
		width: 100%;
	}
	
	.exo-menu > li > a{
		width:100% ;
	    display:none ;
	
	}
	.exo-menu > li{
		width:100%;
	}
	.display.exo-menu > li > a{
	  display:block ;
	  	padding: 20px 22px;
	}
	
.mega-menu, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:relative;
}

}
a.toggle-menu{
    position: absolute;
    right: 0px;
    padding: 20px;
    font-size: 27px;
    background-color: #ccc;
    color: #23364B;
    top: 0px;
}





#rollover {position:relative}
#rollover li a { text-decoration:none;}

#rollover li a span {
visibility:hidden;
display:block;
position:absolute;
/**adjust disjointed image position in % or px where desired**/
	top: 0%;
	
  right: 200%;
  width: 200px;


color:#666;
padding: 0px;
}

#rollover li a:hover span,
#rollover li a:active span,
#rollover li a:focus span { visibility:visible; }

#rollover li a:hover,
#rollover li a:focus {
text-decoration: none;
color:#FF6600;
visibility:visible; }

@media screen and (max-width: 600px) {
  #rollover li a span {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}
<head>
 
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">



</head>

<body class="background">
	 <div class="content">
	 
		<ul class="exo-menu">

<!--HOME LINK-->

			<li><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Experiment_%28website%29_logo.svg/320px-Experiment_%28website%29_logo.svg.png"></li>

<!--PRODUCTS LINK-->
			
			<li class="mega-drop-down"><a href="#"><i class="fa fa-list"></i> PRODUCTS</a>
				<div class="animated fadeIn mega-menu">
					<div class="mega-menu-wrap">
						<div class="row">
						<div class="col-md-4">
							<h4 class="row mega-title">Feature</h4>
								<img class="img-responsive" src="https://3.bp.blogspot.com/-rUk36pd-LbM/VcLb48X4f-I/AAAAAAAAGCI/Y_UxBAgEqwA/s1600/Magento_themes.jpg">
							</div>
							<div class="col-md-2">
									<h4 class="row mega-title">Mega Items</h4>
								<ul class="stander">
									
					    		
					    		
					    		<ul id="rollover">
    <li><a href="#">TEST 1<span><img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Cordell_Bank_National_Marine_Sanctuary_-_panoramio.jpg" style="width:100%;"></span></a></li>
    <li><a href="#">TEST 2<span><img src="https://upload.wikimedia.org/wikipedia/commons/2/23/Monkey_Bizniz_Drama_Queen.jpg" style="width:100%;"></span></a></li>
</ul>
									
									<li><a class="view-more btn- btn-sm" href="#">View more</a></li>
								</ul>
							</div>
							<div class="col-md-3">
								<h4 class="row mega-title">Description</h4>
								<ul class="description">
									<li><a href="#">Women</a>
										<span>Description of Women</span>
									</li>
									<li><a href="#">Men</a>
											<span>Description of men Cloths</span>
									</li>
									<li><a href="#">Kids</a>
											<span>Description of Kids Cloths</span>
									</li>
									<li><a href="#">Others</a>
											<span>Description of Others Cloths</span>
									</li>
									<li>
									<a class="view-more btn btn-sm " href="#">View more</a>
											 
									</li>
								</ul>
							</div>
							<div class="col-md-3">
							<h4 class="row mega-title">Icon + Description</h4>
								<ul class="icon-des">
									<li><a href="#"><i class="fa fa-globe"></i>Web</a></li>
									<li><a href="#"><i class="fa fa-mobile"></i>Mobile</a></li>
									<li><a href="#"><i class="fa fa-arrows-h"></i>Responsive</a></li>
									<li><a href="#"><i class="fa fa-desktop"></i>Desktop</a></li>
									<li><a href="#"><i class="fa fa-paint-brush"></i>UI/UX</a></li>
								</ul>
							</div>
							
						</div>
					</div>	
				</div>
			</li>	

<!--RETAIL LINK-->
				
			<li class="mega-drop-down"><a href="#"><i class="fa fa-list"></i> RETAIL</a>
				<div class="animated fadeIn mega-menu">
					<div class="mega-menu-wrap">
						<div class="row">
						<div class="col-md-4">
							<h4 class="row mega-title">Feature</h4>
								<img class="img-responsive" src="https://3.bp.blogspot.com/-rUk36pd-LbM/VcLb48X4f-I/AAAAAAAAGCI/Y_UxBAgEqwA/s1600/Magento_themes.jpg">
							</div>
							<div class="col-md-2">
									<h4 class="row mega-title">Standers</h4>
								<ul class="stander">
									<li><a href="#">Mobile</a></li>
									<li><a href="#">Computer</a></li>
									<li><a href="#">Watch</a></li>
									<li><a href="#">laptop</a></li>
									<li><a href="#">Camera</a></li>
									<li><a href="#">I pad</a></li>
									<li><a class="view-more btn- btn-sm" href="#">View more</a></li>
								</ul>
							</div>
							<div class="col-md-3">
								<h4 class="row mega-title">Description</h4>
								<ul class="description">
									<li><a href="#">Women</a>
										<span>Description of Women</span>
									</li>
									<li><a href="#">Men</a>
											<span>Description of men Cloths</span>
									</li>
									<li><a href="#">Kids</a>
											<span>Description of Kids Cloths</span>
									</li>
									<li><a href="#">Others</a>
											<span>Description of Others Cloths</span>
									</li>
									<li>
									<a class="view-more btn btn-sm " href="#">View more</a>
											 
									</li>
								</ul>
							</div>
							<div class="col-md-3">
							<h4 class="row mega-title">Icon + Description</h4>
								<ul class="icon-des">
									<li><a href="#"><i class="fa fa-globe"></i>Web</a></li>
									<li><a href="#"><i class="fa fa-mobile"></i>Mobile</a></li>
									<li><a href="#"><i class="fa fa-arrows-h"></i>Responsive</a></li>
									<li><a href="#"><i class="fa fa-desktop"></i>Desktop</a></li>
									<li><a href="#"><i class="fa fa-paint-brush"></i>UI/UX</a></li>
								</ul>
							</div>
							
						</div>
					</div>	
				</div>
			</li>	



<!--BLOG LINK-->
			
			<li class="blog-drop-down"><a href="#"><i class="fa fa-bullhorn"></i> Blog</a>
				<div class="Blog animated fadeIn">
					<div class="col-md-4">
						<img class="img-responsive" src="https://2.bp.blogspot.com/-VG_e0pKfrDo/VcLb6JwZqfI/AAAAAAAAGCk/8ZgA9kZqTQ8/s1600/images3.jpg">
						<div class="blog-des">
					<h4 class="blog-title">Lorem ipsum dolor sit amet</h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
							tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
							nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
							Duis autem vel eum iriure dolor in hendrerit in vulputate. </p>
							<a class="view-more btn- btn-sm" href="#">Read More</a>
						</div>
					</div>
					<div class="col-md-4">
						<img class="img-responsive" src="https://3.bp.blogspot.com/-hUt5FrdZHio/VcLb5dlwTBI/AAAAAAAAGCU/UUH5N1JkoQc/s1600/images1.jpg">
						<div class="blog-des">
						<h4 class="blog-title">Lorem ipsum dolor sit amet</h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
							tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
							nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
							Duis autem vel eum iriure dolor in hendrerit in vulputate. </p>
									<a class="view-more btn- btn-sm" href="#">Read More</a>
						</div>
					</div>
					<div class="col-md-4">
						<img class="img-responsive" src="https://4.bp.blogspot.com/-A7U1uPlSq6Y/VcLb5kKHCkI/AAAAAAAAGCc/7WghyndTEuY/s1600/images2.jpg">
						<div class="blog-des">
						<h4 class="blog-title">Lorem ipsum dolor sit amet</h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
							tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
							nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
							Duis autem vel eum iriure dolor in hendrerit in vulputate. </p>
									<a class="view-more btn- btn-sm" href="#">Read More</a>
						</div>
					</div>
					 
					
				</div>
			</li>

<!--SALE LINK-->
			<li><a href="#"><i class="fa fa-usd"></i> SALE</a></li>

<!--ABOUT LINK-->
			<li><a href="#"><i class="fa fa-briefcase"></i> ABOUT US</a></li>



<!--CONTACT LINK-->
			<li><a href="#"><i class="fa fa-envelope"></i> Contact</a>
				<div class="contact">
			
				</div>
			</li>
			<a href="#" class="toggle-menu visible-xs-block">|||</a>		
	</ul>
	 
	 
	 </div>

0 个答案:

没有答案
相关问题
最新问题