如何一次选择两个链接？ （即标题和图片）

Question

我不知道如何来实现这种缩略图画廊......

http://cargocollective.com/saintea

，当你将鼠标悬停在缩略图像，

它提供了一个高光效果，尽管它们是两个单独的元素，但同时它也是标题。

我可以让他们作为一个文件，但为什么我想有他们分开的原因是分配

不同的效果:)！

有人可以借我一只手吗？

非常感谢你阅读这篇文章！

祝您有美好的一天！

Answer 1

链接标签中只有两个<div> s。但内联元素块元素是无效的，所以你可以更好地利用<span>元素的链接标签这样的：

HTML：

<a href="#"> 
    <span class="one">text</span> 
    <span class="two">something else</span> 
</a> 

a:link span, a:visited span { 
    display: block; /* <-- for example */ 
    color: blue; 
} 

CSS：

a:hover span.one { 
    color: yellow; 
} 

a:hover span.two { 
    color: orange; 
} 

Answer 2

我会请按照以下方式进行：

<img src="image.gif" 
    onmouseover="change image style, then change getElementById('comment') style" 
    onmouseout="change all back"/> 
<span id="comment">some text</span> 

Answer 3

正如其他答案指出的那样， cript和CSS。该页面使用JavaScript和框架jQuery来做到这一点。

我演示了如何在两种方式下完成：here。

考虑下面的HTML：

<a href="#" id="theLink"> 
    <img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" /> 
    <span id="theText">Some text</span> 
</a> 

您可以使用jQuery做（这是页面大致是怎么做的）：

$("#theImage").hover(
    function() { 
     $(this).fadeTo("fast", 0.7); 
     $("#theText").addClass("hover"); 
    }, 
    function() { 
     $(this).fadeTo("fast", 1); 
     $("#theText").removeClass("hover"); 
    } 
); 

其中类hover样式的文本。

在这里，你告诉jQuery的火一个功能，当您将鼠标悬停在的图像，而另一个功能，当你徘徊出形象。 $("this).fadeTo设置图像的不透明度，而$("#theText").addClass ..好吧，它将类添加到theText。

（ofcourse，你不需要 jQuery来做到这一点，它只是使用起来非常顺手这样的框架，因为它抽象的工作远得多）

---

或用CSS：

#imagelink:hover img { 
    /* See http://www.quirksmode.org/css/opacity.html for opacity */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: alpha(opacity=70);  
    opacity: 0.7; 
} 
#imagelink:hover span { 
    background-color: #66E8FF; 
} 

这里，我们告诉浏览器，当我们将鼠标悬停在id为imagelink链接，img类型的链接里面的内容应该有70％的不透明度，而类型的元素span应该甲肝e不同的背景颜色。

Answer 4

包装单个锚元素内的任何元素是完全可以接受的。大多数浏览器已经支持这个功能，而且它实际上是首选。所以我会这样做：

<a href="#"> 
    <img src="image.jpg" width="" height="" alt="" > 
    <p>Description of the image</p> 
</a> 

a:hover img { } 
a:hover p { }