Question

我使用toggleClass和slideToggle来完成以下操作：

当用户选择一个链接时，它将向下滑动div，然后将链接设置为打开，显示相应的背景图像，这只是一个简单的，（+）和（ - ）来打开和关闭格。

我遇到的问题是，在链接右侧显示背景图像，给它留下大约5-10px的边距，给它一些间距。

以下是它正在做的屏幕截图：已关闭（显示（+）符号）：http://cl.ly/4634afa1e7aa4fe10072

打开（显示（ - ）符号）：http://cl.ly/8bc59ab07da46a173d62

链接的HTML：<a href="#" class="our-future-intro-slide">Mapping Our Future: Strategic Plan 2010-2015</a>

CSS用于显示未经修改的链接以及选择后的链接：

// link is not open
.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}

// link is open
.our-future-intro-slide-open {
    background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}

这是jQuery，我想我会把它扔进去，它有效，只是用于使背景图像显示在文本右侧的CSS。

$(document).ready(function() {
 $('.our-future-intro-slide').click(function() {
  $(this).toggleClass("our-future-intro-slide-open");
  $(".our-future-intro").slideToggle(100);
 });
});

Answer 1

试试这个：

.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
    padding-right: 30px; /* or whatever the width of the background image is */
}

当然，对其他规则也有相同的修改。

Answer 2

我不知道我是否完全理解，但您是否尝试使用:after？像

这样的东西

.link:after{background:#FFF;}

Answer 3

我想你会对这篇文章感兴趣 - Pure CSS "Popups"。

更新：这是在链接上悬停图像的另一种方法。

在链接上设置背景图像以显示文本链接的右侧

3 个答案: