CODEWITHSUNDEEP
htmlhover
Harrison Grey
Harrison Grey

Reputation: 1

Adding hover action for element in div

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?

Upvotes: 0

Views: 1269

Answers (2)

Juan L
Juan L

Reputation: 1

<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

Upvotes: 0

Mujtaba Hassan
Mujtaba Hassan

Reputation: 2493

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>​

Upvotes: 1

Related Questions