隐藏在div后面的按钮只显示一个提示

在网站中我有一个项目列表。这些项目中的每一个都有一个图片或者我加入一个<article>标签内像这样的名字：隐藏在div后面的按钮只显示一个提示

<article class="client-card"> 
    <p><img width="211" height="106" src="./img/ftm1.png" class="post-image" alt="ftm" title="ftm" /></p> 
</article>

这是小提琴链接到一个测试。可能图像不起作用：http://jsfiddle.net/9wQg3/

旁边的每一个图片我想添加一个按钮，放大镜将是一个按钮。此按钮还会显示以下文字：'有关此商品的更多信息'，但我希望只让放大镜可见，而按钮的其余部分仍然隐藏在<article>标签的后面。项目放在行中，每行有三个项目，我将在每个页面中显示六个项目。每行将以<div class="clear"></div>结尾，因为每篇文章都向左浮动。这是代码：

<article class="client-card"> 
    <p><img width="211" height="106" src="./img/ftm1.png" class="post-image" alt="ftm" title="ftm" /></p> 
</article><div class="more-info"><a href="#">More information</a></div> 
<article class="client-card"> 
    <p><img width="211" height="106" src="./img/fluid.png" class="post-image" alt="ftm" title="ftm" /></p> 
</article><div class="more-info"><a href="#">More information</a></div> 
<article class="client-card"> 
    <p><img width="211" height="106" src="./img/chemical.png" class="post-image" alt="ftm" title="ftm" /></p> 
</article><div class="more-info"><a href="#">More information</a></div> 
<div class="clear"></div> 
<article class="client-card"> 
    <p><img width="211" height="106" src="./img/alcmelgar.png" class="post-image" alt="ftm" title="ftm" /></p> 
</article><div class="more-info"><a href="#">More information</a></div> 
<article class="client-card"> 
    <p>COLOMBIAN PRESERVED FLOWERS</p> 
</article><div class="more-info"><a href="#">More information</a></div> 
<article class="client-card"> 
    <p><img width="211" height="106" src="./img/fit.png" class="post-image" alt="ftm" title="ftm" /></p> 
<div class="clear"></div>

这是我的样式表：

div.client-list article.client-card{ 
    width: 288px; 
    height: 130px; 
    background: transparent url(images/bg-client-card.png) no-repeat scroll center; 
    float: left; 
    margin-left: 24px; 
    margin: 20px 0px 0px 24px; 
/* position: relative; */ 
} 
div.client-list article.client-card p{ 
    line-height: 110px; 
    margin-top: 10px; 
    width: 100%; 
    text-align: center; 
    vertical-align: middle; 
    color: #030303; 
    font: normal 14px/110px "FuturaLtBTLight", Arial; 
} 
div.client-list div.more-info{ 
    width: 290px; 
    height: 24px; 
    line-height: 24px; 
    background: #ea1571; 
    float: left; 
    margin: 20px 0px 0px 0px; 
    position: relative; 
    top: 0px; 
    left: -290px; 
/* display: none; */ 
}

好吧，当我使用的代码，我得到以下结果： enter image description here

正如你所看到的，这些行看起来是错误的，只有4个显示“更多信息”链接。我留下了一些我用于测试的代码。

我尝试了不同的CSS替代方案，以及插入标签内部，但没有任何作品，请你指点我做错了什么，以及如何纠正它？（我忘了指出包含div的最大宽度是1000px）。

来源

2012-09-20 Tales

作为编码的，你应该使用'

'而不是'

' – Giona

你能否提供一个[小提琴]（http://jsfiddle.net/）的例子，用更多的代码来重现这种情况？ – haynar

提供的代码不足。这[截图]（http://i.imgur.com/cfin1.png）是人们仅基于该代码看到的内容。请考虑使用整个CSS更新您的问题。 – Jay

地方：

<div class="more-info"><a href="#">More information</a></div> 
<a href="#" class="more-info-control">magnyfying glass</a>

的商品标签内

在CSS修改：
```
div.client-list article.client-card{ 
    position: relative; 
} 

div.client-list div.more-info{ 
    width: 290px; 
    height: 24px; 
    line-height: 24px; 
    background: #ea1571; 
    position: absolute; 
    top: 0px; 
    left: -1px; 
    display: none; 
} 
```
重要的是，article.client卡是位置：亲戚;
the div.more-info is inside article and is position：absolute;

这样，div.more-info的0,0参考点不是浏览器窗口的左上角，而是最接近的父亲相对元素的左上角（在本例中是article.client-card ）玩顶/左值你可以定位更多的信息股利。

，然后，用jQuery的，你可以控制何时显示“更多信息” DIV（只是一个示例代码）

$jq("more-info-control").click(function(event) { 
    $jq("div.more-info", $jq(this).parent()).show(); 
});

来源

2012-09-21 09:43:11 thanat

隐藏在div后面的按钮只显示一个提示

回答

相关问题