将图像 link 上传到网站

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 sheet...

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;
}

然而，当我将鼠标悬停在图像上时，link 不起作用是不是我遗漏了什么？

Answer 1

您的 a 锚点不包含任何要点击的 text/elements。

您需要在 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>

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

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

Answer 2

正如费尔克所说。

您有 <a> 标签，但里面什么都没有。

为了制作图片链接，您必须将它们放在 <a> 标签内；像这样。

<li class="gamerscafe"><a href="https://www.youtube.com/channel/UClExmFafx9vTZxDHPwg74Pg"><img src=""></img></a></li>
                                                                                                   //^ image code here

Answer 3

如果您将背景图片样式移动到 a 标签中，它应该可以正常工作，如下所示：

ul.youtube li a{
    display: block;
    background: url(http://gamerscafe.net/images/youtube.png) left top no-repeat;
    width: 140px;
    height: 200px;
}

那么你可以这样应用定位：

ul.youtube li.destiny a {
    background-position: -310px 0px;
}

如果你需要悬停效果：

ul.youtube li.destiny a:hover {
    /*style for hover*/
}

我已将您的网站放入 jsfiddle。请在这里查看工作版本： https://jsfiddle.net/4vdr8dLf/

将图像 link 上传到网站

Getting images to link to website

html

javascript

css

youtube