Adam Zerner
Adam Zerner

Reputation: 19248

Why is cursor: text changing my other cursors?

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

Answers (1)

nickles80
nickles80

Reputation: 1101

Your search div is overlapping the other items.

Search overlapping other items

Upvotes: 3

Related Questions