问当我使用媒体查询并从顶部改变位置时，图像悬停效果不起作用
EN

Stack Overflow用户

提问于 2016-12-15 13:22:49

回答 1查看 535关注 0票数 0

我正在使用媒体查询来使我的网站响应，但当我调整屏幕尺寸和顶部位置元素的值时，悬停效果不起作用。我什么都试过了，但似乎都不管用。请帮帮忙，这是我的代码。

    #getintouch{
    	position: relative; 
    	width: 100%;
    	height: auto;
    	background-color: #FFBA00;
    	top: 400px;
    }
    
    .social-media-icon{
    	position: relative;
    	width: 100%;
    	height: auto;
    	text-align: center;
    }
    
    
    .social-media-header{
    	position: relative;
    	text-align: center;
    	margin: 5%;
    	font-family: Lucida Calligraphy;
    }
    
    .social-media{
    	position: relative;
    	width: 80px;
    	height: 80px;
    	overflow: hidden;
    	text-align: center;
    	display: inline-block;
    	margin: 2% 5% 10% 5%;
    }
    
    
    .social-media a {
    	position: relative;
    }
    
    .social-media img{
    	transition: transform 0.2s ease-in-out;
    	-webkit-transition: transform 0.2s ease-in-out;
    	-moz-transition: transform 0.2s ease-in-out;
    	-o-transition: transform 0.2s ease-in-out;
    }
    
    .social-media img:hover{
    	transform: translate3d(0, -80px, 0);
    	}
    
    @media (max-width: 900px) and (min-width: 760px){
    #getintouch{
    		top: 900px;
    	}	
    }
    
    @media(max-width: 759px){
    	#getintouch{
    		top: 1700px;
    	}
    }

    <div id="getintouch">
    	<div class="social-media-header">
    			<h1>Get In Touch</h1>
    	 </div>
    
    	<div class="social-media-icon">
    			<div class="social-media">
    				<a href="#"><img src="logo/social-media-facebook.png" width="100%"></a>
    			</div>
    			<div class="social-media">
    				<a href="#"><img src="logo/social-media-twitter.png" width="100%"></a>
    			</div>
    			<div class="social-media">
    				<a href="#"><img src="logo/social-media-linkedIn.png" width="100%"></a>
    			</div>
    			<div class="social-media">
    				<a href="#"><img src="logo/contact.png"  width="100%"></a>
    			</div>
    	</div>
    </div>

html

css

回答 1

Stack Overflow用户

发布于 2016-12-15 15:25:12

我怀疑您忘记添加以下关键字: only、screen和

如果您想对不支持该语法的旧浏览器隐藏规则，则使用唯一的值；对于确实支持该语法的浏览器，only实际上会被忽略。

screen关键字是媒体类型。它用于指定媒体查询是针对彩色计算机屏幕的。

将以下更改应用于样式表

 @media only screen and (max-width: 900px) and (min-width: 760px){
#getintouch{
        top: 900px;
    }   
}

@media only screen and (max-width: 759px){
    #getintouch{
        top: 1700px;
    }
}

除此之外，请确保您具有以下meta标记

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41156964

复制

相似问题

问当我使用媒体查询并从顶部改变位置时，图像悬停效果不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我使用媒体查询并从顶部改变位置时，图像悬停效果不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我使用媒体查询并从顶部改变位置时，图像悬停效果不起作用
EN