How can I make a DIV cursor and background color change if I hover over it?


Tags: html,css

Problem :

I have this HTML code:

<div class="authTabs">
   <div class="h2">Login</div>
   <div class="h2">Register</div>
</div>

I am using CSS. Can someone tell me how I can make it so that my cursor changes to a finger pointing and my background color changes when the Login or Register DIVs are hovered over?



Solution :

See DEMO

.authTabs {
 cursor: pointer;
}

.h2:hover {
background-color: red;
}

    CSS Howto..

    How to align the wizard to the left and right sides?

    CSS: how to get scrollbars for div inside container of fixed height

    How to control the size of a table cell in css

    Why do small spaces keep showing up in my web pages?

    How to display a division over other element

    How to draw image dynamically on a canvas line between two cells

    how to make content to be fixed inside scroll div using only css?

    How to have multiple CSS transitions on an element?

    How do I solve this IE7 margin issue?

    How can I have an image float next to a centered div?

    How to have CSS animation only on click and not on page load?

    Dropdown menu. make it show onclick and not onmouseover

    how to position a container in the middle of the screen? [duplicate]

    How to add styling (CSS) to tags in Javascript/Jquery

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    Show Pinterest hover buttons only on images with specified class

    How to target a child element of a multiple parent selector in SASS [duplicate]

    How I make my Dropdown Menu Fade-In Using CSS

    How to disable inline CSS position attribute

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

    tooltip box not showing using css

    CSS - How to make footer stay at the bottom of the page?

    How to precisely center bootstrap grid in html page?

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    I created a jQuery slideshow but it keeps repeating the same image

    How to create an highlight animation when a control gets focused [closed]

    How to change drop-down menu to drop-up menu

    How to scroll a div inside another div?