Reputation: 187

CSS first child hover with a element

I'm trying to get the first a:hover in a div to have a different right-margin, but none of the solutions I've found on this forum seem to be recognized by the browser (I'm using Chrome Version 45.0.2454.93 m).

The 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>

The CSS:

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

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

This is being completely ignored, and just using the a:hover margin on hover.

Full source code below:

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 */
}

Upvotes: 6

Answers (3)

xec

Reputation: 18024

The selector #example:first-child means the first child that has the id 'example', if you want the first anchor child you need #example a:first-child instead

You could do something like the following:

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>

Which will prevent the margin on hovered first-child from changing.

This is technically what you're asking for, but I suspect not what you wanted, as you still manipulate margins on Link 2 and Link 3, so hovering those will result in jitter.

Your comment says "Basically, when I hover the font-weight is increased. So, by setting the margins on each side to -1px it keeps the adjacent links from moving a bit on hover." - this is a bad idea. Different browsers and OSes will render bold fonts differently and 1px will never be right.

There are no simple solutions to this, but a couple workarounds:

do not change font-weight on hover, use underline or color change instead.
Make all links be a fixed width (so they do not rely on their content width, something like the following:

#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>

Googling for 'css hover bold' gave me this, which might work for you: Inline elements shifting when made bold on hover

Upvotes: 3

razemauze

Reputation: 2676

It should be:

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

The way you have written it, it selects the first instance of #example (if it is a first child) and adds the CSS to that.

EDIT: As you can see in this JSFiddle, it works - I have added the color:red; to show it more.

The rest of the links "move", because both of the sides of the links get -1px margin on hover, and can be fixed like this:

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

Upvotes: 10

TOho

Reputation: 330

try this. Select '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>

Upvotes: 4

CSS first child hover with a element

Answers (3)

Related Questions