2

所以我有带有链接的文本墙，当将鼠标悬停在 href 上时，它应该在完全相同的行上显示一个图像，并且总是在全文的左侧，所以不在链接本身旁边（意味着背景图像不会做这个把戏:()。我一直在修修补补，但没有成功，所以希望你们能帮我解决这个问题:)

示例图像

如第二个屏幕截图所示，“kalender”和“menssana@home”是 href，需要在文本旁边使用相同的图像。无论是 javascript 还是 css，任何帮助都将不胜感激！

Html 示例可以在这里找到：http ://www.menssanahealth.be/diensten/particulieren/

第二个示例图像

4

5 回答 5

1

我会在链接中嵌套一个隐藏的图像，并在悬停时创建一个 CSS 规则来显示图像。

基本上是这样的：

A IMG {
  display:none;
}
A:hover IMG {
  display:inline;
}

但这里有一个更充实的例子，它使用图像的绝对定位，这样它就不会影响链接的布局，而是显示在链接的左侧。

http://jsfiddle.net/HLKQ3/

于 2013-05-11T14:02:27.357 回答
0

我找到了 jquery 的解决方案:)

你可以在这里看到它的作用

我添加了以下脚本

<script>
   $('<img src="<?php echo get_template_directory_uri(); ?>/images/bloemblaadje.png" class="bloemblaadje"/>').prependTo("#dienst-wrapper a");
</script>

和CSS

#dienst-content{
    position:relative;
}

.bloemblaadje {
    display:none;
    position:absolute;
    left:0;
    margin-left:-60px;
    text-align: center;
}

#dienst-content a:hover .bloemblaadje{
    display: inline;
}

在有很多链接的页面上可能会很重，但这似乎是这种设计的最佳解决方案。

感谢您的许多建议！

于 2013-05-11T18:04:21.373 回答
0

:before您可以像这样使用CSS

.link:before{
   content:'';
   width:50px;
   height:20px;
   background:url('urlToYourFeatherThing.png') no-repeat top left;
   position:absolute;
   top:0;
   left:-20px; // width of image
   display:none;
}

.link:hover .link:before{
   display:block;
}

哦，您可能需要 .link 以position:relative;使叶子绝对定位到父级。

这个还没有测试过，如果遇到什么问题请告诉我。

祝你好运。

@康纳

于 2013-05-11T12:37:16.803 回答
0
  • 如果您在 a 标签中有一个类名为“leaf”的跨度，您可以在 jquery 中编写如下代码，

HTML应该是这样的，

<a href="http://www.menssanahealth.be/diensten/particulieren/sauna/" title="Sauna"><span class='leaf'>&nbsp;</span><strong>Sauna</strong></a>

jquery应该是这样的，

$("#dienst-content a").hover(
  function () {
    $(this).find('span.leaf').show();
  },
  function () {
     $(this).find('span.leaf').hide();
  }
);

和 CSS，

span.leaf
{
   width:50px;
   height:20px;
   background:url('url-to-leaf-image.png') no-repeat top left;
display: none;
}
于 2013-05-11T12:38:59.930 回答
0

题外话，我有几点意见：

  1. 该页面似乎包含一个服务列表，因此使用<ul><li> ...似乎比使用更合适的标记<p>-
  2. 一些列表项有链接，而另一些则没有，将带有链接的列表项与没有链接的列表项区分开来会更加用户友好——例如，使用粗体文本、不同的颜色、添加箭头或下划线等

回到主题：通过结合使用左填充和左负边距，使用背景图像是完全可行的。但是，如果您真的不想朝那个方向前进，那么我会在 中添加一个额外的跨度<a>，并将其隐藏起来，直到链接悬停。

于 2013-05-11T12:58:18.790 回答