html - 图片悬停和链接组合

标签 html css hover

我用下面的代码创建了一个图像,但我需要添加一个指向它的链接,单击该图像会在新选项卡中打开。我尝试搜索其他帖子,但找不到“图像悬停”和“链接”的确切组合。我将不胜感激。

这是悬停代码

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
.pic{ 
      width:16px; 
      height:16px; 
      opacity: 1; 
      filter: alpha(opacity=100); 
      background: url(http://i.picresize.com/images/2014/10/12/QmCgI.png) no-repeat;
} 
.pic:hover 
{ 
      opacity: 0.3; 
      filter: alpha(opacity=30); } 
</style> 
</head> 
<body> 
      <div class="pic">
      </div> 
</body> 
</html>

最佳答案

通过 CSS 类添加悬停。 要通过单击图像(在新标签中)打开新链接,请使用以下命令:

<img src="your image path" onclick="window.open('https://www.google.com')"/>random text

关于html - 图片悬停和链接组合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26325300/

相关文章:

asp.net - 清理由 ASP.NET 呈现的 'messy' 标记

javascript - 通过覆盖元素 <div> 传递鼠标点击

css - 深度选择器的自定义样式混合

html - 将鼠标悬停在 <ul> 上时,我希望显示另一个 <ul>

html - 使用 CSS,当我将鼠标悬停在一个 div 标签上时,我可以将背景更改为多个 div 标签吗?

jquery - 悬停具有悬停效果的图像,并在另一个 div 中显示文本

javascript - 缩放或裁剪背景图像而不是拉伸(stretch)它

html - 如何将文本放在图标下方?

Jquery css 代码在浏览器中不起作用

html - CSS - 不应用媒体查询