Question

我删除了一堆我的代码，以便了解我需要帮助的内容，我有一个图像，当我将鼠标悬停在它上面时，它会更改图像，但是当我点击它带来的图像时我是如何添加的你可以说mywebsite.com ?? http://pastebin.com/h83yi3e3

代码：

<html>
  <head>
    <style>
       #buttonOne {width:140px;height:60px;background-image:url(buttonOne.png);}
       #buttonOne:hover {width:140px;height:60px;background-image:url(buttonOneH.png);}
       #buttonTwo {width:140px;height:60px;background-image:url(buttonTwo.png);}
       #buttonTwo:hover {width:140px;height:60px;background-image:url(buttonTwoH.png);}
       #buttonThree {width:140px;height:60px;background-image:url(buttonThree.png);}
       #buttonThree:hover {width:140px;height:60px;background-image:url(buttonThreeH.png);}
    </style>
  </head>
  <body>    
      <div id="buttonOne">
      </div>

      <div id="buttonTwo">
      </div>

      <div id="buttonThree">
      </div>    
  </body>
</html>

Answer 1

将div标记为a标记。这就是他们的目的。如果您想要一个可以点击的元素转到另一个网址，则需要一个<a>标记。

<a id="buttonOne" href="http://letssaymywebsite.com/"></a>
<a id="buttonTwo" href="http://letssaymywebsite.com/"></a>
<a id="buttonThree" href="http://letssaymywebsite.com/"></a>

Answer 2

使用锚标记你可以这样做 -

<a id="buttonOne" href="mywebsite.com"></a>
...

然后您可以使用a:hover更改图片

在css中 -

#buttonOne a:hover
{
background-image:url(buttonOneH.png);
}
...

Answer 3

嗯，我不确定你们在谈论删除div是什么，对我来说不起作用，我所做的就是在那些空洞的div中，我添加了一个看不见的链接图像。

<div id="buttonOne">
<a href="mywebsite.com" target="_blank"><img src="inbut.png">
</a>
</div>

HTML和CSS通过悬停效果制作图像链接？

3 个答案: