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锚点不包含任何要点击的文字/元素。

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

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

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/

获取图像链接到网站

3 个答案: