Question

我是一个完整的新手，我发布了另一个问题来帮助我获得一个带有LIST的DIV，然后使整个DIV可点击/链接，当它悬停在它上面时，它会改变颜色。

我搞砸了所有类型的特技，现在我很期待知道最好的方法是什么。

非常感谢。

Answer 1

使用CSS可以很简单地完成。

要使链接的“可点击区域”占用整个div添加display:block到该链接的CSS。

鼠标悬停时的颜色变化也可以使用CSS完成，如下所示：

a:hover {
    background-color:green;
}

我的理解是，您希望将整个列表整合到一个链接中。这似乎有点奇怪，但只需将<a>标记放在<ul>或<ol>标记的外上，如下所示：

<a href="yourlink.html">
<ul>
    <li>List Item 1</li>
    <li>List Itme 2</li>
</ul>
</a>

查看http://www.w3schools.com优秀的初学者网站开发教程。

Answer 2

试试这个：

HTML

<div class="clickable">
<ul>
    <li>hello</li>
    <li>world</li>
</ul>

CSS：

.clickable {
background-color: #ddd;
}

.clickable:hover {
    background-color: #8F8
}

测试：

http://jsfiddle.net/guPan/

如果您想将此操作视为链接，最好只使用链接标记并为其设置display: block css

Answer 3

您需要了解的一些事项：

您可以通过设置来设置<a>的锚点<div>：

a{display:block;}
在悬停使用时使链接背景更改颜色：

a:hover {background:red;}

你可以在里面添加一个有序列表（在HTML5中有效），如下所示：

<a title="My Link" href="http://www.somelinkurl.com">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol></a>

Answer 4

设置锚标记的宽度和高度，并将其声明为display:block。

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #link {
                width:300px;
                height:300px;
            }
            #link a {
                width:300px;
                height:300px;
                display:block;
                background-color:orange;
            }
            #link a:hover {
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="link">
            <a href="#">I am a Link</a>
        </div>
    </body>
</html>

在LIST中制作DIV并使整个DIV可点击？

4 个答案: