Reputation: 19248
See http://www.collegeanswerz.com/.
I set my search bar to cursor: text;
when you hover.
input[type="search"]:hover {
cursor: text;
}
That changed the cursor for my other nav links. The icon, Colleges link, About College link, and Advice link should all be cursor: pointer;
.
However, only the bottom half of those elements have a pointer cursor when I hover. It wasn't like this before I changed the search area to cursor: text;
.
Why is this happening? What could I do to fix it?
EDIT: Here's some potentially relevant CSS
/* main navigation */
#main_nav {
margin-top: -2px;
margin-bottom: -2px;
background-color: #E6F0FF;
height: 70px;
#logo {
position: relative;
top: 10px;
left: 30px;
margin-right: 125px;
display: inline;
float: left;
}
ul {
list-style-type: none;
display: inline;
float: left;
clear: none;
position: relative;
top: 12px;
right: 0px;
li {
margin-right: 45px;
float: left;
color: rgba(0, 0, 255, 0.70);
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
a:hover {
border-bottom: 2px solid rgba(0, 0, 255, 0.70);
color: rgba(0, 0, 255, 0.95)
}
a {
transition: border-bottom 240ms;
text-decoration: none;
font-weight: bold;
color: rgba(0, 0, 255, 0.85);
font-size: 15px;
padding-bottom: 15px;
}
}
}
input[type="search"] {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
}
input[type="search"]:hover {
cursor: text;
}
#search_text {
position: relative;
#search_field {
position: relative;
top: 17px;
left: 30px;
height: 35px;
width: 160px;
}
}
}
Upvotes: 2
Views: 58