Change color of <div> using onMouseover

javascript jquery html event-handling onmouseover

11,992

Solution 1

You can do by doing this

By tag

div:hover {
    background-color: red;
}

By div Class

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

By div Id

#divclass:hover {
        background-color: red;
    }

Solution 2

As the answers show there is a css solution using div:hover.

div:hover {
    background: #FFFFFF;
}

if you like to have a javascript solution, its here:

<div onMouseover="this.style.background = '#FFFFFF'">
//content
</div>

11,992

Author by

Harish R

Software Engineering at College of Engineering, Guindy. Interested in: Programming Android Application Development Web Designing Web Application & Development

Updated on June 04, 2022

Comments

Harish R almost 2 years

Im trying to change the color of the div using omMouse ove Event handler. From grey to black But it doesnt work.

Whats wrong here ? Also how to use onHover and onMouseout ?

<html>

<head>
    <title></title>
    <link type="text/css" href="" />
    <script type="text/javascript" src="" ></script>    
    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: grey;
        }
    </style>

</head>

<body>
    <div onMouseover="this.bgColor = '#FFFFFF'">

    </div>
</body>

<script>

</script>
</html>