logo标签列表

CSS第一个子元素悬停与a元素

htmlcsscss-selectors
6

我将尝试为一个div中的第一个a:hover设置不同的右边距，但是我在这个论坛上找到的解决方案似乎都没有被浏览器识别（我使用的是Chrome版本45.0.2454.93m）。

HTML代码:

 <div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

CSS代码如下：
a:hover {
    margin: 0px -1px;
}

#example:first-child:hover {
    margin-left: 0px;
}

这段代码完全被忽略了，只有在悬停时使用a:hover margin。

完整的源代码如下：

HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>removed</title>
        <link href="css/main.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="container">
            <div id="heading">
                <h2>HOME</h2>
                <hr>
                <h3>removed</h3>
            </div>

            <img src="images/css_dev_smaller.png" alt="" width="5472" height="3648" id="image_main" />
        </div>
        <div id="nagivation">
            <a href="index.html">Home</a> | <a href="removed.html">removed</a> | <a href="removed.html">removed</a>
        </div>
    </body>  
</html>

CSS：

@charset "utf-8";
html,body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    height: 100%;
    width: 100%;
    background: #fff;
}

h2,h3 {
    font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
    font-weight: 100;
    padding: 0px;
}

h2 {
    margin-bottom: -14px;
    margin-top: 40px;

}

h3 {    
    margin-top: -5px;
    margin-bottom: 55px;
}

hr {
    width: 100%;
    border-color: #bdbbc2;
    border-width: 1px 0px 0px 0px;
    height: 1px;
}

#container {
    display: inline-block;
    text-align: center;
    display: block;
    margin: 0 auto;
    min-width: 51%;     
    padding-top: 10%;
}

#heading {
    display: inline-block;
    width: 15%; 
    min-width: 200px;
    padding-right: 10px;
    vertical-align: top;
    text-align: left;
}

#image_main {
    display: inline-block;      
    width: 35%;
    min-width: 250px;
    height: auto;
    margin: 0px auto;   
    padding: 0px;
}

#nagivation {
    margin: 50px auto;
    text-align: center;
}

a:link, a:visited {
    font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
    text-decoration: none;
    color: #000000;
}

a:hover {
    font-weight: 600;
    margin: 0px -1px;
}

#navigation a:first-child:hover {
    margin: 0px -1px 0px 0px;
    color: #B72C2F;  /* TESTING */
    font-size: 20px; /* TESTING */
}
从您对rblarsen的评论中，您说：“在第一个<a>上悬停时，我不希望它向左移动，以便整个链接集在我悬停在第一个链接时不会移动”--这是否意味着当您悬停在第二个和第三个链接等时，您确实希望链接集向左移动？ - xec
@xec 不是什么。基本上，当我悬停时，字重会增加。因此，通过将每个侧面的边距设置为-1px，它可以使相邻的链接在悬停时不会移动一点。但是，在第一个链接上，如果我悬停，它仍然会将其他所有内容向左移动-1px。因此，我希望第一个<a>在悬停时具有修改后的左边距，与其他链接不同。 - Beaker
3个回答
11

它应该是：

#example a:first-child:hover {
    margin-right: 0px;
}

按照您编写的方式，它选择第一个 #example 实例（如果它是第一个子元素），并对其添加 CSS 样式。

编辑： 如您在此JSFiddle 中所见，它可以正常工作-我添加了color:red;以更好地显示它。

其他链接 "移动" 是因为链接两侧在悬停时都获得 -1px 的边距，可以使用以下方法进行修复:

a:hover {
    margin: 0 0 0 -1px;
}
2
它不是“选择第一个#example实例”，而是“如果#example是:first-child，则选择#example”- 这是一个小区别，但非常重要 ;) - xec
抱歉，上面打错了。第一个子元素的左边距应该是0像素。即，在第一个<a>上悬停时，我不希望它向左移动，以便整个链接集在我悬停在第一个链接时不会移动。我尝试了上面的方法，并添加了颜色：红色；以确保我能看到它是否起作用，但它仍然被完全忽略。我还尝试了#example>a:first-child:hover来强制执行它，但没有任何效果。 - Beaker
@rblarsen 这正是我的意思 - #example 不一定是第一个子元素，即使它是页面上唯一具有该ID的元素，请参见http://jsfiddle.net/wwLjp6y7/。 - xec
@rblarsen 我已经添加了完整的源代码，如果有帮助的话。我手动测试了在第一个链接上悬停时使用margin: 0px -1px 0px 0px，其余链接使用margin: 0px -1px，它可以得到我想要的效果。我只是不确定为什么它不接受#navigation a:first-child:hover {...}。 - Beaker
1
@Beaker，你在HTML中拼写了“navigation”错误。 - razemauze
显示剩余2条评论
4

尝试一下这个。选择'a:first-child'

a:hover {
    color: red;
}

#example a:first-child:hover {
    color: black;
    font-size: 20px;
}
<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

完全忽略它 :/ - Beaker
据我所知，这是一个很好的答案，因为它确切地展示了如何将单独的悬停效果应用于第一个子元素，正如问题所涉及的那样。如果这个答案没有解决你的问题，我们可能需要更多的信息。 - xec
@xec 我会编辑上面的内容，展示完整的源代码，希望这能有所帮助。 - Beaker
3
选择器#example:first-child表示具有id为“example”的第一个子元素，如果你想要第一个锚点子元素，你需要使用#example a:first-child。

你可以像下面这样做：

a:hover {
    margin: 0px -1px;
}

#example a:first-child:hover {
    margin: 0px; /* applies to left and right as well as top and bottom margins */
}
<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

这将防止第一个子元素悬停时边距的更改。

从技术上讲，这就是您要求的内容，但我怀疑这不是您想要的，因为您仍然会操纵链接2和链接3的边距，因此悬停这些链接会导致抖动。

您的评论说：“基本上，在我的悬停时增加了字体重量。因此，通过将每侧的边距设置为-1px，它可以保持相邻链接在悬停时不移动。” - 这是一个坏主意。不同的浏览器和操作系统将以不同的方式呈现粗体字体，而1像素永远不会正确。

没有简单的解决方案，但有几个解决方法：

  1. 不要在悬停时更改字体重量，改用下划线或颜色更改。
  2. 使所有链接都具有固定宽度（因此它们不依赖于其内容宽度），类似以下内容：

#example a {
    display: inline-block;
    width: 100px;
}

#example a:hover {
    font-weight: bold;
}
<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

我在谷歌搜索"css hover bold"，找到了这个链接，也许对你有用：当悬停时将内联元素加粗会导致文字移动

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接