Tag: hover

CSS：hover一个元素，效果为多个元素？: 我正在寻找我hover问题的方法。 <div class="section"> <div class="image"><img src="myImage.jpg" /></div> <div class="layer">Lorem Ipsum</div> </div> 现在，这两个类（图像和图层）都有边框，都具有不同的颜色，用于常规和hover。有没有办法做到这一点，如果我hover层类，层和图像类hover边框颜色是活动？反之亦然？

如何在CSS中使用“hover”: 我使用下面的代码来实现这个目标：当鼠标hover在锚上，下划线出来，但它失败了， <a class="hover">click</a> a .hover :hover{ text-decoration:underline; } 什么是正确的版本来做到这一点？

使用JQueryhover与HTML图像映射: 我有一个复杂的背景图片，有很多需要滚动插图突出显示的小区域，以及其他文本显示和相关链接。最后的图解使用Z-index叠加了几张带有透明度的静态图像，高亮翻转插图需要在中间的“三明治”层之一中显示，以达到所需的效果。经过一些不成功的块摆弄，我决定这可能是一个古老的图像地图。我制作了一张带有四个几何形状轮廓的电路图testing图，并用png翻转“填充”了它们。这个想法是将图像映射与底部背景层关联起来，用css {visibility：hidden}初始化所有的翻转，并使用Jquery的hover方法使它们可见，并在单独的div中显示相关的文本。单独的文本函数是为什么我不用这个：hover伪类而不是jQueryhover。因为我正在使用图像映射，所以我将所有翻转png（具有透明背景）的大小设置为整个容器，以便精确放置，因此所有内容都精确排列。我得到的作品…不是真的！图像映射正确映射以仅激活几何区域。但是，每个翻转区域的href只能间歇地工作，而使用jQuery的hover与CSS的可见性是搞砸了。期望的行为是滚动到该区域将简单的形状。实际上发生的事情是，形状内部的任何运动都会在可见和隐藏之间快速切换; 当光标在形状内停止时，它可能是可见的，也可能不是。任何想法赞赏！样本hover设置（我将最终使用真正的翻转数组，相关的链接和文本）： $('#triangle').hover( function() { $('#ID_triangle').css({'visibility' : 'visible'}); }, function() { $('#ID_triangle').css({'visibility' : 'hidden'}); } ) 图片地图： <div id="container"> <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap"> <map name="testMap"> <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" /> <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" /> <area […]

请参阅：Chrome开发人员工具中的hover状态: 我希望看到：我在Chrome浏览器上hover的hover风格。在Firebug中，有一个Style下拉菜单，允许我select一个元素的不同状态。我似乎无法在Chrome中find类似的东西。我错过了什么吗？

Chrome的CSS过渡效果使图像模糊/移动图像1px？: 当divhover时，CSS过渡效果会移动div。这个问题，正如你在例子中看到的那样，“翻译”过渡有使div中的图像向下/向右移动1px的可怕的副作用（并且可能稍微resize），以使其显现出来的地方和聚焦… 这个小故障似乎适用于整个hover效果的应用，从一个反复试验的过程中，我可以肯定地说，只有当翻译过渡移动div时才会出现（box阴影和不透明也适用，但没有任何区别错误时删除）。第二编辑：其实，问题没有解决！在创build一个JSFiddle来说明这个问题时，我偶然发现了一个有趣的观察。该问题只发生在页面有滚动条时。所以只有一个div的例子的例子很好，但再一次相同的div被添加，因此页面需要一个滚动条的问题再次罢工… 有任何想法吗？！

有什么办法可以将鼠标hover在一个元素上并影响不同的元素？: 我希望它是这样简单，但我知道它不是： img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { #thisElement { opacity: 0.3; filter: alpha(opacity=30); } opacity:1; filter:alpha(opacity=100); } 所以当你将鼠标hover在img上时，它会将#thisElement的不透明度更改为30％，并将图像的不透明度更改为100％。有没有办法实际做到这一点只使用CSS？所以这是HTML <!DOCTYPE html> <html> <head> <script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script> <script type="text/javascript" src="briefcase.js"></script> <link rel="stylesheet" type="text/css" href="taskbar.css"/> <link rel="stylesheet" type="text/css" href="briefcase.css" /> <title>Briefcase</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div class="mask"></div> <div […]

如何在使用Java的Selenium WebDriver中执行mouseover函数？: 我想在一个下拉菜单上做mouseoverfunction。当我们将鼠标hover在菜单上时，将显示新的选项。我试图用xpath单击新的选项。但是不能直接点击菜单。所以，作为手动方式，我试图将鼠标hover在下拉菜单上，然后点击新的选项。 Actions action = new Actions(webdriver); WebElement we = webdriver.findElement(By.xpath("//html/body/div[13]/ul/li[4]/a")); action.moveToElement(we).build().perform();

内联元素在hover时变为粗体: 我使用HTML列表和CSS创build了一个水平菜单。除了将鼠标hover在链接上以外，其他所有function都可以正常工作。你看，我为链接创build了一个大胆的hover状态，现在菜单链接因为大小的不同而变化。我遇到与此SitePointpost相同的问题。但是，这个职位没有适当的解决办法。我到处寻找解决scheme，找不到一个解决scheme。当然，我不能成为唯一一个试图做到这一点的人。有没有人有任何想法？ PS：我不知道菜单项中文本的宽度，所以我不能只设置li项目的宽度。这是我的代码： HTML： <ul class="nav"> <li class="first"><a href="#">item 0</a></li> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> CSS： .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li […]

如何在支持触摸的浏览器中使用触摸模拟hover？: 用这样的一些HTML： <p>Some Text</p> 然后是这样的一些CSS： p { color:black; } p:hover { color:red; } 我怎样才能允许长触摸启用触摸的设备来复制hover？我可以改变标记/使用JS等，但不能想到一个简单的方法来做到这一点。

如何影响其他元素，当div被徘徊: 我认为这是一个非常基本的问题，但我不知道如何做到这一点。我想要做的是当一个div被徘徊的时候，会影响另一个div的属性。例如，在这个简单的例子中，当您将鼠标hover在#cube它将更改background-color但是我想要的是，当我将鼠标hover在#container #cube时， #container #cube受到影响。 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div>