显示href悬停的左图

Question

所以我有带有链接的文本墙，当悬停在href上时，它应该在完全相同的行上显示图像，并且始终在全文的左侧，因此不在链接本身旁边（意味着背景图像）不会做的伎俩:(）。我一直在修补一下，但没有成功，所以希望你们可以帮我解决这个问题：）

如第二个屏幕截图所示，“kalender”和“menssana @ home”是hrefs，需要在文本旁边显示相同的图像。如果它是javascript或css，任何帮助都表示赞赏！

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

Answer 1

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

基本上这个：

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

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

http://jsfiddle.net/HLKQ3/

Answer 2

您可以像这样使用CSS :before

.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;，以便叶子绝对定位于父母。

尚未经过测试，如果您遇到任何问题，请告诉我。

祝你好运。

@Connor

Answer 3

• 如果你在a标签中有一个带有类名'leaf'的span，你可以在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;
}

Answer 4

偏离主题，我有几点意见：

1. 该网页似乎包含服务列表，因此使用<ul><li> ...似乎比<p>-
更合适的标记
2. 某些列表项目有链接，其他列表项目不是更多用户 友好地区分列表项与列表项中的链接 没有链接 - 例如使用粗体文字，不同颜色，添加箭头或下划线等

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

Answer 5

我找到了一个jquery的解决方案：）

您可以在行动here

中看到它

我添加了以下脚本

<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;
}

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

感谢您提出的许多建议！