Menu
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 */
}
596
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;
}
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
