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?

Answer 1

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>

Answer 2

<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

Question

2 answers

solution1
1 2012-12-17 06:54:11

solution2
0 2014-06-08 05:45:09

Adding hover action for element in div

Question

2 answers

solution1 1 2012-12-17 06:54:11

solution2 0 2014-06-08 05:45:09

solution1
1 2012-12-17 06:54:11

solution2
0 2014-06-08 05:45:09