@media手持设备 - 无悬停效果

css
hover

2014-07-12 44 views 1 likes

对于当前项目，我尝试使用触摸屏移除设备上的悬停效果。我的计划是使用@media handheld { /* non-hover styles here */ }，粘贴在我的css文件中，其上有:hover，然后删除所有悬停效果。@media手持设备 - 无悬停效果

例子：

/* desktop */ 

a.my_element { 
color : #ff0000; 
} 
a.my_element:hover { 
color : #000000; 
} 

/* handheld devices */ 

@media handheld { 
a.my_element:hover { 
} 
}

是我的逻辑是否正确？这会工作吗？

来源

2014-07-12 Malasorte

你需要明确说明您想在查询中删除悬停效果。 – BuddhistBeast

我不明白（？） - 我想删除站点范围内的所有悬停效果。 – Malasorte

回答

尝试以下操作：

HTML

<a href="#" class="my_element"> example </a>

CSS

a.my_element { 
color : #ff0000; 
} 
a.my_element:hover { 
color : #000000; 
} 

/* handheld devices */ 

@media (max-width: 480px){ 
    a.my_element:hover { 
     color: #ff0000;   
    } 
}

这将几乎用在460px的媒体查询样式悬停为彩色，仿佛完全一样它没有被徘徊（最终创造你想要做的）。

DEMO JSFiddle

来源

2014-07-12 04:15:01 BuddhistBeast

但是为什么我不能只添加一个空的a.my_element：hover？效果应该是一样的...... – Malasorte

但事实并非如此，只是因为你没有指定在这个宽度上会发生什么。如果您没有放入任何内容，则媒体查询不会执行任何操作，因为您没有指定它。但是，如果添加要变为的颜色，则媒体查询可以确认并执行CSS。基本上增加一个EMPTY空间与之前保持相同的悬停效果。 – BuddhistBeast

谢谢，我现在明白了！ – Malasorte

@media手持设备 - 无悬停效果

回答

相关问题