首页 \ 问答 \ 在图像上定位超链接(Positioning hyperlink over an image)

在图像上定位超链接(Positioning hyperlink over an image)

 我在链接图像时遇到问题。 我正在使用不透明度和悬停状态进行此链接，我设法让它工作，但结果不是我所期望的。 悬停不按我想要的方式工作。 我相信有更好的方法可以做到这一点，希望有人能够帮助我。 谢谢！  
 这是HTML代码：  
<ul id="content-images">
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li>
</ul>
<span class="show"><a href="#">Link1</a></span>
<span class="show"><a href="#">Link2</a></span>
 
 和CSS代码：  
.show {
    opacity:0.8;
    position:relative;
    top:10px;
    left:10px;
  }
 .show:hover {
    opacity:1.0;
  }
 .show2 {
    left: 1px;
    opacity: 0.8;
    position: relative;
    top: -39px;
  }
 .show2:hover {
    opacity:1.0
  }

I have a problem with positioning a link over an image. I am using the opacity and a hover state for this link and I managed to get it to work, but the outcome is not what I expected. The hover doesn't work the way I want. I believe there are better ways of doing this, hope someone will be able to help me. Thanks! 
Here is HTML code: 
<ul id="content-images">
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li>
</ul>
<span class="show"><a href="#">Link1</a></span>
<span class="show"><a href="#">Link2</a></span>
 
And CSS code: 
.show {
    opacity:0.8;
    position:relative;
    top:10px;
    left:10px;
  }
 .show:hover {
    opacity:1.0;
  }
 .show2 {
    left: 1px;
    opacity: 0.8;
    position: relative;
    top: -39px;
  }
 .show2:hover {
    opacity:1.0
  }

原文：https://stackoverflow.com/questions/18126264

更新时间：2024-03-06 16:03

最满意答案

 使用.each()循环，以便在运行插件时引用该元素，如下所示：  
$('ul li').each(function() {
  $(this).qtip({
    content: $(this).find('span.tooltip').text(),
    show: 'mouseover',
    hide: 'mouseout'
  });
});

Use a .each() loop so you can reference the element as you run the plugin on it, like this: 
$('ul li').each(function() {
  $(this).qtip({
    content: $(this).find('span.tooltip').text(),
    show: 'mouseover',
    hide: 'mouseout'
  });
});

在图像上定位超链接(Positioning hyperlink over an image)

最满意答案

相关问答

从jQuery对象获取基本元素(Getting the base element from a jQuery object)[2022-04-27]

jQuery对象和DOM元素(jQuery object and DOM element)[2022-03-14]

如何检测jQuery中的当前元素？(How to detect current element in jQuery?)[2022-06-02]

获取对象Jquery中的当前元素(Getting the current element in object Jquery)[2023-05-03]

JavaScript - 使用jQuery获取hasClass（）的当前焦点元素(JavaScript - Get current focused element that hasClass() with jQuery)[2023-12-08]

我不能得到使用jquery元素的当前位置(i cant get current position of element using jquery)[2022-05-19]

从jQuery对象中删除元素(Remove element from jQuery object)[2023-11-04]

由jQuery元素组成的对象(object consisting of jQuery element)[2023-10-03]

获取元素的当前HTML(Get the current HTML of an element)[2022-03-21]

如何在jquery自动完成中获取当前元素？(How to get current element in jquery autocomplete?)[2024-04-12]

相关文章

最新问答