对处于悬停状态的元素的操作

Posted 2023-03-06

【中文标题】对处于悬停状态的元素的操作

【英文标题】：Action on a elements in Hover state

【发布时间】：2014-02-15 14:15:49

【问题描述】：

我在My Site's footer 中遇到了悬停问题。如您所见，页脚内的每个链接（也包括推文）在悬停时都会变为白色，但也会移动。 *我根本不需要它们中的任何一个移动。*我不知道如何停止这个动作。

CSS 代码：

#footer a 
font-size: 14px;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 300;
color: #fec214;

【参考方案1】：

你有这个另一个选择器：

#sidebar ul li, #footer ul li :hover
    padding: 0px 0 0px 0;
    margin: 0px 4px 10px 0px;   
    line-height: 34px;
    background: none;
    font-size: 1em; 
    padding-top: 17px;
    margin-bottom: -20px;
    color: white;
    width: 200px;

这会在li 内触发a 项目的hover 状态。还有更多specificity。

如果您删除 line-height 声明然后停止移动：

line-height: 34px; /*Remove this*/

【讨论】：

嗨@Danko，我已经删除了行高声明，但运动仍然存在。我应该将#sidebar 类和#footer 类悬停吗？ .我确实注意到，如果我将 line-height 从 34px 更改为 15px，移动效果会更短，但仍然存在。在 Mozilla 中，从 34px 到 20px 的这种变化将保持不变，就好像页脚的第一列没有发生任何事情一样。是否可以将此行高与未声明悬停状态的同一元素的行高相关联？

您清除缓存了吗？并将更改上传到您的网站以便我检查？

缓存被清除并且提到的变化是实时的@Danko

@Gonpires 我说删除这条线，但如果你想保持它与#footer .widgetBox a 相同，这里是 16px

16px 在 Chrome 和 safari 上完美运行！ ，但我需要让它在 Mozilla 中也能正常工作。你对此有什么想法吗？

【参考方案2】：

我检查了你的 CSS，这是我发现的

media="screen"
#sidebar ul li, #footer ul li :hover 
padding: 0px 0 0px 0;
margin: 0px 4px 10px 0px;
line-height: 34px;
background: none;
font-size: 1em;
padding-top: 17px;
margin-bottom: -20px;
color: white;
width: 200px;

给你。只需删除 color:white; 和 line-height 就可以了。

【讨论】：

怎么了？我确实删除了它，但我仍然有问题。我将 line-height 从 34px 更改为 15px 并且移动不太明显，但仍然存在。 （仅在 chrome 和 safari 中，不是 Mozilla）。

您需要添加一个 jsfiddle 以便我们查看发生了什么。 （或至少在您的实际网站上更新它。）您是否也尝试删除 padding-top ？尝试禁用整个代码块/* */ 并从那里获取。

我将 line-height 更改为 16px 并且在 safari 和 chrome 上不再移动，但问题仅在 Mozilla 的第一列上仍然存在（需要浏览器支持）。我尝试删除填充顶部，但没有改变。我很想添加一个 jsfiddle，但我的网站是在 wordpress 架构下，当我复制 html 和 css 时，它只呈现一个框。

您至少需要在线更新它，这样我才能看到它。不看就不可能知道问题。

已更新。您可以看到每个页脚图标和链接在 Mozilla 中是如何移动的。

【参考方案3】：

您在选择器中有一个 line-height 属性，该属性会在您将鼠标悬停在您的链接上并四处移动时触发。 只需将其删除，看看它是否适合您。

#sidebar ul li, #footer ul li :hover
    padding: 0px 0 0px 0;
    margin: 0px 4px 10px 0px;   
    /* line-height: 34px; */
    background: none;
    font-size: 1em; 
    padding-top: 17px;
    margin-bottom: -20px;
    color: white;
    width: 200px;

这个 sn-p 来自 style.css 中的第 2603 行。

【讨论】：

嘿@Michael S.，我已经删除了它，但移动仍然存在。我已将 line-height 从 34px 更改为 15px 并且移动更小（仅在 chrome 和 safari 中，而不是在 mozilla 中）。