Question

如何在YouTube视频右侧的“建议”完成后，如何在悬停时超链接整个div并更改背景颜色？

Answer 1

它不是一个div，而只是一个ahref而且在ahref内部是填充块的span。您可以在鼠标悬停时使用jQuery更改li的背景。

    <li class="video-list-item">
<a href="Link" class="video-list-item-link">
<span class="ux-thumb-wrap ">
<span class="title">Title</span>
<span class="stat">by YouTube</span>
<span class="stat">
</a>
</li>

只需检查youtube的来源:)（Firebug）

Answer 2

最简单的是根本不使用div，而是在像这样的a-tag上使用display: block：

<a href="..." style="display: block;">link text</a>

您甚至可以将它与浮动或定位结合起来，使其全部符合您的喜好

对于悬停效果，您可以使用：hover css定义，如下所示：

<style>
  a { background: #fff; display: block;}
  a:hover { background: #f00; }
</style>

<a href="...">link text</a>

以下是一个可以用作灵感的工作示例：

<html>
<head>
<style>
a { display: block; background: #fff; width: 200px;}
a:hover { background: #88f; }
</style>
</head>
<body>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare tortor ac libero sodales id sodales ligula posuere. Sed fringilla, quam eu lacinia fringilla, magna sapien convallis velit, at molestie erat tellus ullamcorper metus. In hac habitasse platea dictumst. Mauris faucibus imperdiet lacus eget sagittis.</a>
</body>
</html>

Answer 3

如果你想点击div，你需要javascript。使用onclick事件捕获点击并按照以下链接：

<div id="mydiv" onclick = "top.location.href='http://www.google.com'">

你问题的颜色变化部分可以在CSS中使用：hover选择器完成，但是在IE中不起作用（IE只识别：over for links）所以你不妨用onmousover和onmousout事件来做这件事更改div的样式属性，如

<div id="mydiv" onclick = "top.location.href='http://www.google.com'" onmousover="this.style.backgroundColor='blue'" onmousout="this.style.backgroundColor='white'">

Answer 4

为什么整个div？你为什么不随便做一个锚并把东西放进去。然后根据需要定位/设计它？

Answer 5

如果您查看YouTube来源，则会看到<a>元素，而不是<div>。每个文本的图像和位都包含在链接内的跨度中。我就是这样做的。

超链接整个div

5 个答案: