问题: 我有一个响应式设计和一组两列的链接。每组链接都是一个列表。它们居中对齐。当您将鼠标悬停时,文本旁边应该出现一个箭头,但我无法流畅地定位它。我想出的最好方法是将箭头绝对定位在悬停上,以便它“适用于”我的所有列表项。虽然看起来很糟糕。我希望它位于每个列表中每个 h3 的左侧。我只是还没有找到一个聪明的方法来做到这一点。
<div class="contentLeft">
<ul class="ca-menu">
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
</ul>
</div>
<div class="contentRight">
<ul class="ca-menu">
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="ca-content">
<h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
<p class="ca-sub">This is the subheading</p>
</div>
</a>
</li>
</ul>
</div>
这是我的 CSS:
.arrow {
display: none;
width: 61px;
}
.ca-menu li:hover .arrow {
display: inline;
width: 61px;
position: absolute;
top: 10px;
}
.ca-menu {
margin-left: 0;
padding-left: 0;
z-index: 1;
}
.ca-menu li {
height: 100px;
overflow: hidden;
position: relative;
display: block;
margin-bottom: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:last-child {
margin-bottom: 0px;
}
.ca-menu li a {
text-align: center;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
text-decoration: none;
}
.ca-content {
height: 60px;
}
.ca-main {
font-size: 26px;
color: #666;
margin-bottom: 10px;
text-decoration: none;
line-height: 29px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-sub {
color: #999 !important;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:hover .ca-icon {
color: #e3721e;
opacity: 0.8;
text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main {
opacity: 1;
color: #e3721e;
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub {
opacity: 1;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
color: #333 !important;
}
感谢任何帮助。谢谢!
最佳答案
解决这个问题的一个快速方法是留出-ve 边距。 Here 是一个有效的实时演示。但你必须考虑一些事情。如果您为图像指定高度和宽度,如果这没有改变,并且您已经在 CSS 中设置了它,则无需将其与 <img>
一起放置。 。只需在 CSS 中定义图像宽度和高度即可。
关于css - 与图像悬停链接 - 需要帮助定位图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12240247/