Javascript 我使一个图像看起来像一个可点击的按钮,但现在当我点击它时,它不作为超链接吗?
这是我的按钮代码:Javascript 我使一个图像看起来像一个可点击的按钮,但现在当我点击它时,它不作为超链接吗?,javascript,html,css,Javascript,Html,Css,这是我的按钮代码: .info_button { width: 220px; height: 300px; position: absolute; overflow: hidden; margin-right: 0; border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -webkit-border-radius: 10px; background: url(http://i.imgur
.info_button {
width: 220px;
height: 300px;
position: absolute;
overflow: hidden;
margin-right: 0;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://i.imgur.com/DkdX4Ci.jpg);
background-repeat: no-repeat;
background-position: 0 0;
box-shadow: 3px 3px 20px #363024;
}
.info_button > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.info_button > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.info_button > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}
.info_button > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.info_button:hover{
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position:relative;
top:7px;
margin: 0;
}
这是我的html:
<div class="info_button" style="position:absolute; left:190px; top:25px;">
<header>
<p><a href="https://www.google.com" target="_self"><span id="info_button"> BoilerPlate of my Mansion</span></a></p>
</header>
</div>
这是我工作的提琴:
该按钮的功能与我希望的完全相同,但单击时不会链接到超链接。如果我遗漏了什么或需要添加什么,请告诉我。
谢谢。你为什么不这样做呢
<a href="..."> <img src="..."> </a>
问题在于锚定标记上的z索引设置为0;一旦您将其更改为正z指数,即100,则现在可以单击链接
.info_button > header p a {
margin: 0;
color: white;
position: relative;
z-index: 100;
}
要使整个按钮可点击,您必须修改HTML,如下所示:
<a href="https://www.google.com" target="_blank">
<div class="info_button" style="position:relative; left:190px; top:25px;">
<header>
<p><span id="info_button">
BoilerPlate of my Mansion</span></p>
</header>
</div>
</a>
所以我的问题的答案来自@Donte'Trumble。 CSS代码:
.info_button {
width: 220px;
height: 300px;
position: absolute;
overflow: hidden;
margin-right: 0;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://i.imgur.com/DkdX4Ci.jpg);
background-repeat: no-repeat;
background-position: 0 0;
box-shadow: 3px 3px 20px #363024;
}
.info_button > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.info_button > header1::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.info_button > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}
.info_button > header p {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.info_button:hover{
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position:relative;
top:7px;
margin: 0;
}
HTML:
<a href="https://www.google.com" target="_blank">
<div class="info_button" style="position:absolute; left:190px; top:25px;">
<header><p><span id="info_button">BoilerPlate of my Mansion</span></p>
</header>
</div>
</a>
工作小提琴:
问题在于我的z-index,必须使其成为一个正整数,所以将其从0改为100,再次感谢@Donte'Truble。你的CSS使用一个类,你的HTML使用一个ID和一个同名的类。也许你应该选一个。我试过了,但已经不起作用了。在你的小提琴中,你丢失了锚标签。我不是说是它造成了问题,只是看起来可能会引起一些混乱。这是你想要的吗?我不能使用img标签,我必须在cssSo中包含图像。为什么你在小提琴中包含img标签?你把我弄糊涂了。对不起,我的小提琴太重了,这是我原来的小提琴:谢谢你的帮助,现在可以用了。非常感谢。祝您今天过得愉快。