javascript - 获取图像链接到网站

Question

我把它放在下面的文件中:index.html

<ul class="youtube">
    <li class="gamerscafe"><a href="https://www.youtube.com/channel/UClExmFafx9vTZxDHPwg74Pg"></a></li>
    <li class="destiny"><a href="https://www.youtube.com/channel/UCyrifIvvkvGj1c-ltnbop4A"></a></li>
    <li class="halo"><a href="https://www.youtube.com/channel/UCjdkHFov_Tqb9mzrEXStrog"></a></li>
    <li class="assassins"><a href="https://www.youtube.com/channel/UCSFscOh0tN1hsz-7UMIVYkQ"></a></li>
    <li class="gearsofwar"><a href="https://www.youtube.com/channel/UC26Tt6oTOS4UpdGzAOVMZKA"></a></li>
    <li class="armyoftwo"><a href="https://www.youtube.com/channel/UCqvhFvrTYsv3VGg9j9elNtA"></a></li>
</ul>

我把它放在 style.css 表中...

ul.youtube
{
width: 650px;
margin: 0px auto 0;
height: 10px;
}

ul.youtube li{
float: left;
background: url(../images/youtube.png) left top no-repeat;
position: relative;
height: 20px;
margin-right: 70px;
}

ul.youtube li a{
display: block;
width: 18px;
height: 20px;
}

但是，当我将鼠标悬停在图片上时，链接不起作用是不是我遗漏了什么？

Answer 1

您的 a anchor 不包含任何要单击的文本/元素。

你需要在你的 a 标签中插入一些东西，例如图片:

<a href="http://URL/TO/DESTINATION">
    <img src="http://URL/TO/IMAGE.png" />
</a>

或者，如果你只想跨越一个可点击区域，定义一些内部尺寸的元素

<a href="http://URL/TO/DESTINATION">
    <div style="height: 100px; width: 300px;"></div>
</a>

但主要问题是，您的 anchor 没有您可以点击的内容。

编辑:我想您也可以直接编辑 a 的尺寸而不是 div。 a 需要一个 display: block; 或 display:inline-block