我在博客上玩一个自己开发的主题。我有一个网格的图像点击通过一个特定的类别。
我在尝试在图像上创建悬停效果时遇到了问题。我想可能是因为我使用链接的方式(绝对定位,并将其设置为100%高度)。
我该如何进行以下设置:
- 在悬停上添加一个颜色覆盖(简单的a.entry-link:hover不起作用)
- 悬停时为图像添加缩放效果
任何帮助都将不胜感激。
提前谢谢。
<div class="post-list">
<div id="articles">
::before
<article>
<div class="entry-thumbnail">
<img src="http://localhost:8888/defylife/assets/images/posts/piste_temp.jpg"></img>
</div>
<!--
entry header
-->
<div class="entry-header">
<h2>
Morocco 2015
</h2>
</div>
<a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/morocco/"></a>
</article>
<article>
<div class="entry-thumbnail">
<img src="http://localhost:8888/defylife/assets/images/posts/gpz_romania_thumb.jpg"></img>
</div>
<!--
entry header
-->
<div class="entry-header">
<h2>
Norwich - Mamaia
</h2>
</div>
<a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/norwich-mamaia/"></a>
</article>
<article>
<div class="entry-thumbnail">
<img src="http://localhost:8888/defylife/assets/images/posts/P6070238.jpg"></img>
</div>
<!--
entry header
-->
<div class="entry-header">
<h2>
Norwich - Split
</h2>
</div>
<a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/norwich-split/"></a>
</article>
<article>
<div class="entry-thumbnail"></div>
<!--
entry header
-->
<div class="entry-header"></div>
<a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/spain/"></a>
</article>
</div>
和CSS:
body.category .post-list #articles {
width: 100%;
padding: 0px;
display: table;
margin: 0px;
}
body.category .post-list #articles article .entry-thumbnail {
display: block;
width: 100%;
max-height: 431px;
overflow: hidden;
margin: auto;
}
body.category .post-list #articles article .entry-thumbnail img {
width: 100%;
}
body.category .post-list #articles article {
display: inline;
width: 33.3333%;
margin: -6px 0px 0px; /* this is due to a small gap between rows */
position: relative;
float: left;
text-align: center;
}
body.category .post-list #articles article .entry-header {
z-index: 100;
position: absolute;
color: #FFF;
font-size: 24px;
font-weight: bold;
left: 0px;
right: 0px;
bottom: 5px; /* this is because for some reason there are gaps between rows */
background: rgba(0, 0, 0, 0.25) none repeat scroll 0px 0px;
padding: 15px;
}
body.category .post-list #articles article .entry-header h2 {
font-size: 0.85em;
text-transform: uppercase;
}
body.category .post-list #articles article .entry-link {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
border-bottom: 0px none;
height: 100%;
z-index: 100;
opacity: 0;
}
-
您的
<a>
标记不包含任何要更改的元素,因此悬停不会影响它们(<img>
和<h2>
中的文本都存在于父<article>
标记中-您可能希望将:hover
放在文章标记上,并更改内部元素(即article:hover div.entry-header { background: rgba(0,0,0,0.5); }
) -
至于缩放-与1相同,可以通过悬停父元素来更改宽度/高度。别忘了,如果你想有"缩放"效果,你可能还想改变位置(左侧和顶部)。
下次请在这里提供代码,而不是作为链接。它将更容易提供帮助,将来也会提供帮助。