Question

我想知道如何实现这种缩略图库......

http://cargocollective.com/saintea

就像滚动缩略图一样，

它同时为标题提供了一个高亮效果，即使它们是两个独立的元素。

我可以将它们作为一个文件，但我想让它们分开的原因是分配

不同的效果:)！

有人可以借给我一把手吗？

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

祝你有个美好的一天！

Answer 1

链接标记中只有两个<div>个。但是内联元素中的块元素无效，因此您最好在链接标记中使用<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

正如其他答案所示，你可以用javascript和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。

（当然，你不需要需要 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应具有不同的背景颜色。

Answer 3

将单个锚元素中的任何元素包装起来是完全可以接受的。大多数浏览器已经支持这一点，并且w / HTML5实际上是首选。所以我会这样做：

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

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

Answer 4

我会按照以下方式进行：

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

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

4 个答案:

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

4 个答案:

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