HTML/CSS/SVG 按钮不可点击

Question

<a class="round-button2" href="index.html" >
<img src="images/Palette.svg" alt="Palette" />
</a> 
<a class="round-button3" href="index2.html" >
<img src="images/Chef.svg" alt="Chef" />    
</a>

https://drive.google.com/open?id=1496aL5TpiqSO4pIh81wkq41Gn02OppE1 是 SVG 的链接 https://codeitdown.com/css-round-buttons/是我遵循的教程;我承认这是一篇 4 年前的文章;它可能已经过时了。我希望社区能够提供帮助。

我可以显示 svgs/圆圈，但它们无法单击到我需要它们访问的索引链接。我是一个新手编码员/html用户。我在Adobe Dreamweaver中运行了这个。

CSS/样式

.round-button2 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button2:hover #shape{
background: #262626;
}
.round-button2 img {
display: block;
width: 90%;
padding: 20%;
height: auto;
}

.round-button3 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button3:hover #shape{
background: #262626;
}
.round-button3 img {
display: block;
width: 90%;
padding-bottom: 15%;
padding-left: 20%;
padding-right: 12%;
padding-top: 20%;
height: auto;
}

Answer 1

将width更改为max-width 70%;img类。a类需要正确的宽度和高度才能单击。 检查这个小提琴(基于你的代码和那个指南(。

http://jsfiddle.net/maxofpower/Jyjjx/13886/

.round-button {
width: 10%;
height: 0;
padding-bottom: 10%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button:hover {
background: #262626;
}
.round-button img {
display: block;
width: 76%;
padding: 12%;
height: auto;
}
.round-button2 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button2:hover #shape{
background-color: #262626;
}
.round-button2 img{
display: block;
max-width: 70%;
height: auto;
padding:5px 8px 0;
}
.round-button3 img 
{
display: block;
max-width: 70%;
height: auto;
padding:10px ;
}
.round-button3 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button3:hover #shape{
background: #262626;
}

<div class="round-button">
<a href="http://example.com">
<img src="http://codeitdown.com/media/Home_Icon.svg" alt="Home" />
</a>
</div>
<div class="round-button2">
<a   href="index2.html" >
<img id=shape src="https://svgur.com/i/8as.svg" alt="pallete" />    
</a>
</div>
<div class="round-button3">
<a   href="index2.html" >
<img id=shape src="https://svgur.com/i/8bu.svg" alt="Chef" />    
</a>
</div>

Answer 2

这是通过添加 z 索引来修复的：100;