Looking for some assistance.
I've created an unordered list with list items and applied the following CSS to it:
li {
opacity: 0.5;
}
li:hover{
opacity: 1;
}
The issue arises when I hover over a pixel from within a word in "li" - it stops hovering and reverts the opacity back to 0.5, creating a flickering effect as I move the mouse around. How can I make the "li" behave like a block to prevent this from happening? I've attempted to nest a div inside each "li" and apply div:hover, but encountered the same problem. Appreciate any guidance.
FULL HTML AND CSS (excluding margin and reset css):
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="file.css">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<div class="header">
<p><span>Example </span>One</p>
<ul id="nav_bar">
<li class="nav_button"><a>Overview</a></li>
<li class="nav_button"><a>About</a></li>
<li class="nav_button"><a>Help</a></li>
</ul>
<p id="intro">Random message here.</p>
<div id="PlayNow">Click here to x!</div>
<p id="versao">For bla bla<p>
</div>
</body>
</html>
font-face {
font-family: UbuntuR;
src: url(Ubuntu-R.ttf);
}
@font-face {
font-family: UbuntuB;
src: url(Ubuntu-B.ttf);
}
@font-face {
font-family: UbuntuL;
src: url(Ubuntu-L.ttf);
}
body{
background-color: #e4a714;
cursor: default;
}
.header {
padding: 16px;
position: relative;
text-align: center;
background-color: #231f20;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header span{
font-family: UbuntuB;
}
#nav_bar .nav_button {
display:inline-block;
padding-left: 6px;
padding-right: 6px;
cursor: pointer;
opacity: 0.5;
font-family: UbuntuL;
color: white;
font-size: 16px;
}
#nav_bar .nav_button:hover{
opacity: 1;
}
.header p{
color: white;
font-family: UbuntuL;
font-size: 26px;
padding-bottom: 12px;
}
#intro {
padding-top: 25px;
padding-bottom: 30px;
font-size: 38px;
font-family: "Segoe WP", "Segoe UI Light", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
}
#PlayNow {
background-color: #e4a714;
font-family: UbuntuL;
display: inline-block;
color: white;
padding: 15px;
font-size: 24px;
border-radius: 3px;
}
#PlayNow:hover {
background-color: #ffbb16;
}
#versao {
font-family: font-family: "Segoe WP", "Segoe UI Light", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
margin-top: 6px;
font-size: 16px;
opacity: 0.6;
}
After removing:
<div class "logo"><img class="logo" src="http://i.imgur.com/jufQbVj.png"></div>
from the code, it started functioning correctly.
Any tips on where I might be going wrong would be much appreciated. Thank you.