如何使 img 和 text 链接都链接到同一个地方，并且在悬停时都变得活跃，而与我悬停在哪个位置无关？

Posted 2023-03-06

【中文标题】如何使 img 和 text 链接都链接到同一个地方，并且在悬停时都变得活跃，而与我悬停在哪个位置无关？

【英文标题】：How can I make an img and text link both link to the same place and both become active on hover independent of which one i am hovering over?

【发布时间】：2010-11-27 03:19:09

【问题描述】：

我希望能够将鼠标悬停在图像上调用它旁边的文本链接上的悬停属性。

我有一个视频的图像预览和旁边写的视频名称作为文本字符串。我想做它，这样我就可以将鼠标悬停在图片上，并使文本仍然像悬停效果一样改变颜色，而不必将图像和文本都制作成一个图像，出于明显的搜索和可用性原因；将文本保留为文本等。

更新：我还想确保现在位于“span”中的文本链接不仅可以使用“margin-left”移动，而且可以提升。默认情况下，在我的代码中，它只是下降到 60x60px 图像底部的水平。我希望它更高，所以它看起来不错，但“margin-bottom”并没有帮助。我希望它在 60x60 img 的“中心高度”中......而不是在默认情况下它的底部。

有什么想法吗？谢谢！

附言我对这里发布的java脚本和jquery想法持开放态度，但我是一个完整的新手，需要额外的解释。我更喜欢CSS。

我现在的代码是：

我的 html 是：

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div> 

我的 CSS 是：

div#example          float:left; width:358px; height:60px; margin-top:20px;    
div#example a        color:#B9B9B9; width:100%;  
div#example a:hover  color:#67a; text-decoration:none;  
span.videotext       margin-left:80px; 

【问题讨论】：

哇，我从来不知道你可以有这么久的主题/标题！

【参考方案1】：

我很抱歉。我误读了你的问题。这是另一个尝试：

HTML

<div class="video">
    <a href="" title="title">
        <img  src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video 
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    
    .video img 
        float: left;
        margin-right: 15px; 
    
    .video a:hover 
        color: #hexcol; 
    
    .video:after 
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    

显然，这里有一些您不需要的样式，但我使用它们在浏览器中进行测试。如果您希望文本与视频缩略图垂直对齐，则需要将 line-height 属性设置为与缩略图图像相同的高度。这会将文本推到视频的中间。

【讨论】：

不，这行不通。图像不是您设置的链接的一部分。另外：它对文本链接问题没有任何帮助；即它被卡在它旁边的图像的脚高度。它仍然只能使用 'margin-left" 移动并且不能被抬起。不过谢谢。

将上述内容调整为类似于 .video img:hover, .video img:hover + a /* styles */ 的内容，但如果用户 :hovers 超过 <a>，我不确定如何将 :hover 应用于 img。

【参考方案2】：

您可以使用 CSS 或 javascript 来做到这一点。在不了解您的标记以及元素的布局方式的情况下，无法确定哪个选项最好。

CSS 选项

a:hover span  color:red; 
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

在该示例中，我们将文本和图像都包含在链接中。然后我们在 :hover 事件上修改文本的颜色。

Javascript (jQuery)

div.hovered p  color:red; 

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function ()  $(this).parent().addClass("hovered"); ,
  function ()  $(this).parent().removeClass("hovered"); 
);

此示例展示了一种解决方案，该解决方案只需将一个类添加到父容器，这反过来会修改标题的表示。此事件通过将图像悬停在容器内来控制。

更新：

定位您的文本并不难。快速简便的方法是用相对定位父容器，用绝对定位文本：

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container             position:relative; width:150px; 
div.container span.title  position:absolute; top:0; left:50px; width:100px; 

这是一个简单的例子。您可以根据需要修改这些值。

【讨论】：

正如我上面所说的“凤凰” - 你的答案与他们的相似，但更接近但仍不完美。这就是我想要的（即文本链接在将鼠标悬停在图像以及文本链接上时会改变颜色），但图片是 60x60px 的 img 和文本，无论什么最终都位于右下角图片。我想让文本在 img 的右边大约 40 像素，在 60x60px 的一半处，这样它就可以很好地排列。您提出的“跨度想法”有效，因此我可以使文本链接向左移动，但它仍然位于 img 旁边的底线

继续：让它与左边距一起移动很有帮助，但我仍然需要它向上移动以查看右边距底部没有任何作用。有任何想法吗？我不确定如何真正使用 jquery，因为我真的是新手，所以如果可以的话，我更喜欢 css。我的 html 是： 图像文本 我的 CSS 是：div#example float:left;宽度：358px；高度：60px；边距顶部：20px； div#example a 颜色:#B9B9B9; width:100%; div#example a:hover color:#67a;text-decoration:none; span.videotext margin-left:80px;

@John：我已经更新了我的解决方案以包含定位您的标题的信息。

乔纳森——你就是男人！效果很好！我从来没有真正掌握过各种定位。我只需要在有限的情况下使用它们，并且在我有限的经验中从未真正使用过绝对定位。我也从来没有真正理解基于它的描述的相对定位是什么，但现在我使用 absolute 和它的父项作为设置为相对的排序的“关键项”......它更有意义！非常感谢！

【参考方案3】：

基于乔纳森的回答，但如果您不使用 jQuery，则适用于 javascript：

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on)
  element = document.getElementById(elemID);  
  if(on)
    element.style.color='red';
  
  else
  
    element.style.color='black';
  

</script>

【参考方案4】：

怎么样

<style>
a 
 
    color: #000000; 

a:hover 
 
    color: #a9a9a9; 

</style>

<a href="#"><img src="imagepath"  />&nbsp;Image Text</a>

【讨论】：

这就是我想要的（即文本链接在将鼠标悬停在图像以及文本链接上时会改变颜色），但图片是 60x60px 的 img 和文本，无论结果如何就在图片的右下角。我想让文本在 img 的右侧大约 40 像素，在 60x60px 的一半处，这样它就可以很好地排列。下面由 Jonathan Sampson 提出的“跨度想法”有些帮助......但最终还是有点短。我会在那里解释。不过谢谢！

@John，尝试使用属性line-height 来调整文本的垂直位置。如果你使用的 line-height 等于图像的高度，那么它应该垂直居中。