Question

我正在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来完成）我根本不熟悉这种编程风格。

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

Answer 1

使用onmouseover功能

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

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

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

祝你好运

在div中添加元素的悬停操作

2 个答案: