Adding hover action for element in div

Question

I'm making a custom menu on WordPress and added a div style to turn the text into a clickable image.

<div style="
    background-image: url('http://www.luchaquest.net/home/wp-content/uploads/2012/12/first.png');
    background-repeat: no-repeat;
    display: center;
    margin: 0;
    padding: 0 0 0 20px;
    width: 195px;
    height: 70px;
"></div>

Everything so far is working, but I'd like it to have a hover action as well (should be accomplishable by having a line background-position: 0 -195px) I'm not familiar with this style of programming at all.

How can I add the hover information into this code all in the same element?

possible duplicate of [How to write a:hover in inline CSS?](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) — Barmar, Dec 17 '12 at 06:50

score 1 · Answer 1 · answered Dec 17 '12 at 06:54

Use onmouseover function

<div id="divID" onmouseover="javascript:UpdateBackground();" style="
background-image: url('http://www.luchaquest.net/home/wp-content/uploads/2012/12/first.png');
background-repeat: no-repeat;
display: center;
margin: 0;
padding: 0 0 0 20px;
width: 195px;
height: 70px;
"></div>

<script type="text/javascript">
    function UpdateBackground(){
    alert('before update');
document.getElementById("divID").style.backgroundPosition="center bottom";
    alert('after update');
    }
</script>

Thanks for the script. I'm having trouble using it myself, but it is setting me on the right direction I think. — Harrison Grey, Dec 17 '12 at 15:23

score 0 · Answer 2 · answered Jun 08 '14 at 05:45

<head>
<link type="css/text" rel="stylesheet" href="Name.css">
</head>
<body>
<div id="divname" style="
background-image: url('http://www.luchaquest.net/home/wp-content/uploads/2012/12/first.png');
background-repeat: no-repeat;
display: center;
margin: 0;
padding: 0 0 0 20px;
width: 195px;
height: 70px;
"></div>
</body>

Now, go to your .css file and add:

#divname:hover {
background-position:0 -195px;
}

Good Luck

Adding hover action for element in div

2 Answers2