我试图使用纯CSS的方法通过hack来在点击时将“汉堡菜单”图标更改为“关闭”图标。请检查以下代码:
.ham
{
height: 30px;
padding: 15px 20px;
}
.dsp-none
{
display:none;
}
.cross
{
display:none;
height: 30px;
padding: 15px 20px;
}
.ham-icon:checked .cross
{
display: block;
}
<input id="click" type="checkbox" name="menu" class="ham-icon dsp-none"/><label for="click" class="ham-lnk"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" class="ham tr-fl"><rect x="12" y="20" width="40" height="2"/><rect x="12" y="32" width="40" height="2"/><rect x="12" y="44" width="40" height="2"/></svg>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="611.979px" height="611.979px" viewBox="0 0 611.979 611.979" class="cross"><g><path d="M356.781,305.982L601.453,61.311c14.033-14.033,14.033-36.771,0-50.774c-14.004-14.033-36.741-14.033-50.774,0
L306.007,255.208L61.277,10.536c-14.004-14.033-36.771-14.033-50.774,0c-14.004,14.004-14.004,36.742,0,50.774l244.701,244.672
L10.503,550.684c-14.004,14.004-14.004,36.771,0,50.774c7.016,7.017,16.216,10.51,25.387,10.51c9.2,0,18.371-3.493,25.387-10.51
l244.701-244.701l244.671,244.701c7.017,7.017,16.217,10.51,25.388,10.51c9.199,0,18.399-3.493,25.387-10.51
c14.033-14.033,14.033-36.771,0-50.774L356.781,305.982z"/></g></svg></label>
我无法得到所需的结果。 点击后应该变成十字形图标,无需使用任何动画或过渡效果。有人可以提供一种解决方法吗?