1

我想使用不同大小的列表块。

在 JSFiddle 的“结果”部分中，如果用户将鼠标悬停在块顶部（文本所在的位置）附近，则只能选择“工作”列表条目。如果用户将鼠标悬停在文本下方，则它不起作用。我希望用户能够将鼠标悬停在此块的任何部分上。

我已经把我的代码放在这里

JSFiddle http://jsfiddle.net/susan/5kDHS/3/

感谢您提供的任何帮助。
谢谢，苏珊。

<div id="mainblock"><b>My Day</b>
    <ul id="blocks">
        <li id="timework"><a href="http://www.google.com">Working 75% </a>
        </li>
        <li id="timeplay"><a href="http://espn.go.com/">Playing 25%</a>
        </li>
    </ul>
</div>
4

3 回答 3

1

如果要保持锚点的填充，可以尝试使用 CSS 计算。

#blocks li a
{
    background-color: #CCCCCC;
    border-bottom: 1px solid #AAAAAA;
    color: #333333;
    display: block;
    padding: 10px;
    height: calc(100% - 20px); /* <----- added this */
    text-align: left;
    text-decoration: none;
}

这允许锚点填充容器，但也减去填充量。如果你简单地使用 `height: 100%;' 您会发现由于填充，锚点超出了它们的容器。

更新了 Fiddle（仅在 Chrome 中测试）

除此之外，它可能需要在锚项目内增加一个跨度来创建所需的填充。

于 2013-05-10T19:54:31.670 回答
1

尝试这个

#blocks li a
{
    .......
    height: 100%;
}

http://jsfiddle.net/5kDHS/8/

我已经使锚标签的高度等于它的父母 li 的 100%

于 2013-05-10T19:51:09.960 回答
0

只需添加height: 100%;到#blocks li a. 小提琴：http: //jsfiddle.net/5kDHS/6/

于 2013-05-10T19:48:42.357 回答