HTML和CSS使图像链接具有悬停效果？

Question

I cut out a bunch of my code to get down to what I need help with, I have a image that when I hover over it it changes images, but how cna I add on that when I click on that image it brings you to lets say mywebsite.com ?? 我剪出一堆代码以寻求所需的帮助，我有一个图像，当我将鼠标悬停在其上时，它会更改图像，但是当我单击该图像时，如何添加cna会带您进入说mywebsite.com？ http://pastebin.com/h83yi3e3 http://pastebin.com/h83yi3e3

Code: 码：

<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

Make those div s into a tags instead. 使那些div s转换a标签来代替。 That's kind of what they are for. 这就是他们的目的。 If you want an element that you can click to go to another url, you want an <a> tag. 如果需要一个可以单击以转到另一个URL的元素，则需要一个<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

Using anchor tags you can do like this- 使用定位标记，您可以这样做-

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

and then you can use a:hover to change the images 然后您可以使用a:hover更改图像

In css- 在css中

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

Answer 3

Well i'm not sure what you guys were talkign abotu removign the divs, didn't work for me, What I did is inside those empty divs I had I added in a link-image that was invisible. 好吧，我不确定你们在说什么abotu移除了div，对我没有用，我所做的是在那些我添加了一个不可见链接图像的空div内。

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

HTML和CSS使图像链接具有悬停效果？

问题描述

3 个解决方案

解决方案1
3 2012-11-20 06:53:08

解决方案2
0 2012-11-20 06:55:07

解决方案3
0 2012-11-20 16:40:14

HTML和CSS使图像链接具有悬停效果？

问题描述

3 个解决方案

解决方案1 3 2012-11-20 06:53:08

解决方案2 0 2012-11-20 06:55:07

解决方案3 0 2012-11-20 16:40:14

解决方案1
3 2012-11-20 06:53:08

解决方案2
0 2012-11-20 06:55:07

解决方案3
0 2012-11-20 16:40:14