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年历史的文章；它可能已经过时了。我希望社区能够提供帮助。

我可以显示svg / circles，但是无法单击它们所需的索引链接。我是新手程序员/ 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-index：100来解决。