我正在尝试将一些内容集中在我创建的动画按钮中。实质上,我正在尝试使用HTMLActionLink实现下面的HTML。
是否可以在使用HTMLActionLink时将div嵌入链接内部?
是否可以在任何HTMLHelper中嵌套任何内容?
以下是样式表,如果有用的话:
.linkbox-button {
cursor: pointer;
width: 33%;
height: 33%;
border: 1px solid black;
display: inline-block;
background-size: cover;
margin: 2px auto;
}
.linkbox-button-bl,
.linkbox-button-rd {
font-variant: small-caps;
font-style: italic;
font-weight: bold;
font-size: 2em;
height: 100%;
width: 0;
transition: width 0.7s ease-out;
overflow: hidden;
display: inline-block;
}
.linkbox-button-content {
margin-top: 25%;
}
.linkbox-button:hover .linkbox-button-rd,
.linkbox-button:hover .linkbox-button-bl {
width: 100%;
}
<div class="linkbox-button" style="background-image:url(../../Images/General/coach.png)">
<a href="#" class="linkbox-button-bl">
<div class="linkbox-button-content">
<p> hello </p>
</div>
</a>
</div>
我的意思是你也可以告诉我如何在不使用额外div D的情况下将内容集中在链接内部。这是我唯一能想到的,不会牺牲整个按钮作为链接。
我无法找到任何表明类似内容的资源,所以如果这是重复,我会道歉。