标签: hover

我有这个问题,我设置一个图像,当鼠标悬停时显示另一个图像,但第一个图像仍然出现,新的图像不会改变高度和宽度,并重叠另一个.我仍然是HTML/CSS的新手,所以我可能错过了一些简单的东西.这是代码:

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

我经常发现自己想要调试CSS布局问题,这些问题涉及由Javascript引起的DOM更改,以响应悬停事件或由于:hover选择器而应用的不同CSS规则.

通常情况下,我会使用Firebug检查那些给我带来麻烦的元素,看看它的CSS属性是什么,以及这些属性的来源.但是,当涉及悬停时,它变得不可能,因为只要您将鼠标移动到Firebug面板,您感兴趣的元素就不再悬停,适用的CSS规则也不同,(在这种情况下) JS徘徊)DOM被改变了.

有没有办法可以"冻结"DOM的状态和应用程序:hover以便在悬停事件期间检查DOM ？

当然,欢迎任何关于如何调试此类问题的其他想法.

我怎样才能使它像一条div线一样锚定,所以当我将它悬停在它上面时它会返回红色

CSS

.e
{
    width:90px;
    border-right:1px solid #222;
    text-align:center;
    float:left;
    padding-left:2px;
    cursor:pointer;


}
.f .e
{
    background-color:#F9EDBE;

}

HTML

<div>
    <div class="e" >Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>         
<div class="f">
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>   
<div>
    <div class="e">Company</div>
    <div class="e">Targetaaa</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>            
<div class="f"> 
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>  

我有一个复杂的背景图像,有很多小区域需要翻转图高亮,以及每个区域的附加文本显示和相关链接.最后的插图使用z-index堆叠了几个具有透明度的静态图像,并且高亮翻转插图需要在中间的"三明治"层之一中显示以实现期望的效果.

在一些不成功的摆弄块后,我决定这可能是用旧式的图像映射完成的.我制作了一个带有四个几何形状轮廓的示意性测试图,并使用png翻转"填充"它们.我们的想法是将图像映射与底部背景图层相关联,使用css {visibility:hidden}初始化所有翻转,并使用Jquery的悬停方法使它们可见,并在单独的div中显示相关文本.单独的文本函数是我没有尝试使用:hover pseudoclass而不是jQuery hover的原因.因为我正在使用图像映射,所以我将所有翻转png(具有透明背景)的大小设置为整个容器以进行精确放置,因此所有内容都准确排列.

我得到了什么......不是真的!正确映射图像映射以仅激活几何区域.但是每个翻转区域的href只是间歇性地工作,并且使用带有css可见性的Jquery悬停是混乱的.期望的行为是滚入该区域只会使形状变得坚固.实际发生的是,形状内的任何运动都可以在可见和隐藏之间快速切换; 当光标在形状内停止时,它可能是可见的,也可能不是.任何想法赞赏!

样本悬停设置(我最终会使用数组进行实际翻转,相关链接和文本):

$('#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 shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" …

有没有办法延迟:Hover事件而不使用javascript？我知道有一种方法可以延迟动画,但我还没有看到任何延迟:Hover事件.

编辑...

对不起,我应该把这个包括在内......我正在建立像菜单一样的suckerfish之子.我想在没有添加额外JS重量的情况下模拟hoverIntent所做的事情.我更喜欢将其视为渐进增强,而不是将JS作为使用菜单的要求.

更新

这是最终的代码...... http://jsfiddle.net/aEgV3/

感谢您的帮助!

如何Bootstrap 3在悬停时更改表格行的背景.我现在使用的表类是table table-striped.我试图<tr>在表格中的标签上添加一个额外的类,并使css像这样.table-row:hover{background:black;}.现在只有非条纹行正在工作.是不是在引导程序中有一个类可以让我轻松实现它？或者我应该用它JQuery来解决这个问题？我真的无法自己解决这个问题.

css是否可以在移动设备上使用？我有一个css悬停类,它可以在常规的Web浏览器上正常工作,但不适用于移动浏览器.

我有一个锚,当一个class-btn包含一个类的类徘徊时,它会改变它的背景图像background-image.

徘徊时,它有

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

当页面第一次加载并且您第一次悬停此按钮时,它会闪烁(下载悬停图像需要大约半秒钟).如何避免没有JavaScript的闪烁(只允许简单的CSS和HTML)？

我试图搜索Stack Overflow类似的问题,但没有运气.

刚刚添加:

• 我应该"预加载"悬停的图像吗？怎么样？
• 我应该使用z-index还是不透明度？

它适用于所有浏览器,因此该解决方案适用于所有浏览器.

我在悬停在图像上时试图显示描述.我已经用不太理想的方式完成了它,使用图像精灵和徘徊在这里:http://willryan.us/design.html我希望它看起来与我拥有它完全一样,但使用真实文本代替图片.

我尝试了一些不同的东西,但我似乎无法弄清楚如何做到这一点.我只是尝试使用HTML和CSS,但我不确定这是否可行.

请随意在我的代码中浏览,我会粘贴我认为相关的内容.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
} …

我想要实现这样的事情:

当我将鼠标悬停在图像上时,我想在图像上添加一些带有文字和图标的深色图像.

我被困在这里.我找到了一些教程,但他们没有解决这个问题.另外,另一个问题 - 每个图像都有不同的高度.宽度始终相同.

如何实现这种效果？