Okay, so I’ve gotten :hover to work in the past and I have no idea why it’s not working right now. Not going to include all my code, just what’s important. Trying to change the color of menu-bar-item’s text with hover.
This is my .css file:
f.header-text {
font-family: Courier New;
}
.panel-icon {
height: 50px;
width: 50px;
}
.dashboard-list {
display: inline;
align-content: flex-end;
}
.menu-bar-item {
margin-top: -10px;
font-family: Courier New;
padding: 10px 20px;
background-color: transparent;
color: black;
}
.menu-bar-item:hover {
color: white;
}
This is my index.html:
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1">
<title>the scoop.</title>
<link rel="stylesheet" type="text/css" href="styles/index_styles.css">
</head>
<body>
<div id="root">
<!--
This div is used for the menu bar.
It will contain hoverable, clickable rectangles that have text
Clicking on any of the rectangles will redirect to a different page.
-->
<div class="menu-bar">
<a href='#top' style='text-decoration:none' class="menu-bar-item">
About
</a>
<a href='#top' style='text-decoration:none' class="menu-bar-item">
Resume
</a>
<a href='#top' style='text-decoration:none' class="menu-bar-item">
Projects
</a>
What exactly isn’t working, it seems to change the color of the menu items to white for me.
Strange. That’s exactly what I’m going for, but it’s not working. Might have something to do with the rest of my html or css that is causing it to act up. I will include the rest of my code below.
css:
f.header-text {
font-family: Courier New;
}
.panel-icon {
height: 50px;
width: 50px;
}
.dashboard-list {
display: inline;
align-content: flex-end;
}
.menu-bar-item {
margin-top: -10px;
font-family: Courier New;
padding: 10px 20px;
background-color: transparent;
color: black;
}
.menu-bar-item:hover {
color: white;
}
.menu-bar {
margin: auto;
padding: 10px;
border-spacing: 5px;
}
#root {
background-color: lightblue;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#canvasDiv {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#profile {
display: flex;
}
#headshot {
border-radius: 50%;
height: 240px;
width: 180px;
border: 3px solid black;
}
#profile_info {
display: flex;
flex-direction: column;
}
#name {
margin-bottom: 15px;
}
#quicklinks {
display: flex;
margin-top: 50px;
}
.small_icon {
width: 75px;
height: 60px;
background-color: transparent;
margin-left: 15px;
margin-right: 15px;
}
#download:hover {
background: #89bdc9;
opacity: .8;
}
#small_icon:hover {
background: #89bdc9;
opacity: .8;
}
a:hover {
color: white;
background: #89bdc9;
opacity: .8;
}
html:
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1">
<title>the scoop.</title>
<link rel="stylesheet" type="text/css" href="styles/index_styles.css">
</head>
<body>
<div id="root">
<!--
This div is used for the menu bar.
It will contain hoverable, clickable rectangles that have text
Clicking on any of the rectangles will redirect to a different page.
-->
<div class="menu-bar">
<a href='#top' style='text-decoration:none' class="menu-bar-item">
About
</a>
<a href='#top' style='text-decoration:none' class="menu-bar-item">
Resume
</a>
<a href='#top' style='text-decoration:none' class="menu-bar-item">
Projects
</a>
</div>
<div id="profile">
<div id="profile_pic">
<img src="images/headshot.jpg" id="headshot">
</div>
<div id="profile_info">
<div id="name"><h2>Andrew McFarlane</h2></div>
<div id="blurb"><p>Software Engineer based out of Langley, BC</p>
<div id="quicklinks">
<div>
<img src="images/email_icon.png" class="small_icon">
</div>
<div>
<img src="images/github_icon.png" class="small_icon">
</div>
<div>
<img src="images/linkedin_icon.png" class="small_icon">
</div>
<div id="download">
<img src="images/download_icon.png" class="small_icon">
</div>
</div>
</div>
</div>
</div>
<div id="canvasDiv">
<canvas id="landscape"></canvas>
</div>
</div>
</body>
<script type="text/javascript" src="libraries/anime.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</html>
Is any of your CSS working? It seems to work fine for me, maybe you linked your CSS file incorrectly?
Yes. Changing root’s background color works perfectly, so the css file has been linked properly.
Okay, something weird happened.
I cut out all the css that was below the .menu-bar-item:hover rule, and the hover worked. No idea why.
As soon as I put all the rest of the css back in, it goes back to not working. Any ideas?
<div id="canvasDiv">
<canvas id="landscape"></canvas>
</div>
It seems that this is overlaying on top of the elements. It is covering the whole webpage and is setting on top of the elemenets. You can give it a negative z-indes to put it behind everything but if you plan on using it for something later you may need to find a better fix.
1 Like