我正在编写一个旨在从台式机和平板电脑上使用的网站.当从桌面访问它时,我希望屏幕的可点击区域点亮:hover效果(不同的背景颜色等).使用平板电脑,没有鼠标,所以我不想要任何悬停效果.
问题是,当我在平板电脑上点击一些东西时,浏览器显然有某种"隐形鼠标光标",它移动到我点击的位置,然后将其留在那里 - 所以我刚刚点击的东西点亮了悬停效果,直到我点击其他东西.
我在使用鼠标时如何获得悬停效果,但在使用触摸屏时抑制它们？
如果有人想提出建议,我不想使用用户代理嗅探.同样的设备可能同时具有触摸屏和鼠标(今天可能不常见,但将来会更加如此).我对该设备不感兴趣,我对它目前的使用方式感兴趣:鼠标或触摸屏.
我已经尝试挂钩touchstart,touchmove和touchend事件,并呼吁preventDefault()对所有的人,这确实抑制"隐形鼠标"的一些时间; 但是如果我在两个不同的元素之间来回快速点击,经过几次点击它就会开始移动"鼠标光标"并点亮悬停效果 - 这就像我preventDefault并不总是很荣幸.除非必要,否则我不会厌倦你的细节 - 我甚至不确定这是正确的方法; 如果有人有更简单的解决方案,我会全力以赴.
编辑:这可以用沼泽标准的CSS :hover重现,但这里有一个快速的repro供参考.
<style>
.box { border: 1px solid black; width: 150px; height: 150px; }
.box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>
如果你鼠标悬停在其中任何一个框上,它将获得我想要的蓝色背景.但是如果你点击其中任何一个盒子,它也会得到一个蓝色背景,这是我试图阻止的事情.
我还在这里发布了一个示例,它可以完成上述操作并且还可以挂钩jQuery的鼠标事件.您可以使用它来查看点击事件也会触发mouseenter,mousemove以及mouseleave.
:hover如果用户通过触摸设备访问我们的网站,我想忽略所有CSS声明.因为:hoverCSS没有意义,如果平板电脑在点击/点击时触发它,它甚至会令人不安,因为它可能会坚持直到元素失去焦点.说实话,我不知道为什么触摸设备:hover首先需要触发- 但这是现实,所以这个问题也是现实.
a:hover {
color:blue;
border-color:green;
// etc. > ignore all at once for touch devices
}
那么,(如何):hover在声明触摸设备之后,我可以一次性删除/忽略所有CSS 声明(不必知道每一个)吗？
有没有办法:hover 只使用 CSS？如:如果:hover是on Mouse Enter,是否有CSS相当于一个on Mouse Leave？
例:
我有一个使用列表项的HTML菜单.当我将鼠标悬停的项目之一,有来自CSS彩色动画#999来black.当鼠标离开项目区域时,如何创建相反的效果,动画从？black到#999？
(请记住,我不想只回答这个例子,而是整个"相反的:hover"问题.)
我有一组<a>标签具有不同的rgba背景颜色但相同的alpha.是否可以编写单个css样式,仅更改rgba属性的不透明度？
代码的快速示例:
<a href="#"><img src="" /><div class="brown">Link 1</div></a>
<a href="#"><img src="" /><div class="green">Link 2</div></a>
和风格
a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}
我想要做的是写一个单一的样式,它会在<a>悬停时改变不透明度,但保持颜色不变.
就像是
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
我的页面似乎存在问题:http: //www.lonewulf.eu
将鼠标悬停在缩略图上时,图像会在右侧稍微移动,而只会在Chrome上进行.
我的css:
.img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
display:block;
border:1px solid #121212;
}
.img:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-khtml-opacity: 1;
display:block;
}
我试图在鼠标悬停时使div的背景颜色发生变化.
div {background:white;}
div a:hover {background:grey; 宽度:100%;
显示:块; 文字修饰:无;}
只有 div中的链接才能获得背景颜色.
我该怎么做才能使整个div获得背景颜色？
谢谢
编辑:
如何让整个div作为一个链接 - 当你点击该div上的任何地方,带你到一个地址.
我试图通过Chrome的开发者工具查看工具提示在网站上的结构.然而,即使我在项目上空盘旋,当我"检查元素"时,html中的工具提示也没有显示.我知道我可以设置样式:hover,但我仍然无法看到工具提示的html或css.
有任何想法吗？
我有很多篮球队的副手.因此,当其中一个团队正在盘旋时,我想为每个团队展示不同的东西.此外,我正在使用Reactjs,所以如果我可以有一个变量,我可以传递给另一个很棒的组件.
我正在寻找悬停问题的方法.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
现在,两个类(图像和图层)都有边框,两者都有正常和悬停的不同颜色.有没有办法这样做,如果我悬停图层类,层和图像类悬停边框颜色是活跃的？反之亦然？
当我正在调试一个站点时,有时悬停的选择器有点长,并且与其他类似,有没有办法在Firebug中应用一种"粘性"状态来悬停规则？
例; 我将鼠标悬停在导航栏上,并希望将选择器从firebug中复制到CSS中进行搜索,但是一旦我移动鼠标,选择器(显然)就会消失,因为导航<li>器不再悬停.
有什么办法吗？
谢谢 :)