-1

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

我用各种特技把它搞砸了，现在我很期待知道什么是最好的方法。

非常感谢。

4

4 回答 4

0

它可以用 CSS 相当简单地完成。

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

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

a:hover {
    background-color:green;
}

我的理解是，您希望将整个列表变成一个链接。这似乎有点奇怪，但只需将<a>标签放在or标签的外部，如下所示：<ul><ol>

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

查看http://www.w3schools.com以获得优秀的初学者 Web 开发教程。

于 2013-05-27T19:37:58.880 回答
0

尝试这个：

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

于 2013-05-27T19:43:52.367 回答
0

你需要知道的几件事：

  1. <a>您可以通过设置来制作一个类似于 a的锚 ( ) <div>：

    a{display:block;}

  2. 要使链接背景在悬停时更改颜色，请使用：

    a:hover {background:red;}

  3. 你可以像这样在里面添加一个有序列表（在 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>
于 2013-05-27T19:49:06.380 回答
0

设置锚标记的宽度和高度并声明它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>
于 2013-05-27T21:28:21.747 回答