0

我正在 WordPress 上制作自定义菜单并添加了 div 样式以将文本转换为可点击的图像。

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

到目前为止一切正常，但我希望它也有一个悬停动作（应该可以通过一条线来完成background-position: 0 -195px）我根本不熟悉这种编程风格。

如何在同一元素中将悬停信息添加到此代码中？

4

2 回答 2

1

使用鼠标悬停功能

<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>​
于 2012-12-17T06:54:11.690 回答
0 
<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>

现在，转到您的 .css 文件并添加：

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

祝你好运

于 2014-06-08T05:45:09.767 回答