Question

感谢您提前提供任何帮助。

看看这里：http://www.martialgear.com/martial-arts-gear/sparring-gear.html

将鼠标放在第一个产品Padded Weapons Protective Headgear

上

请注意上面的整个类别部分如何在悬停时更改颜色。这使我出于某种原因，有序列表与其上方的DIV部分重叠。应该发生的只是产品部分的背景切换颜色。

适用于第2，第3和第4产品等。

我已经尝试过对CSS和html进行各种调整，但无法做到这一点。

Answer 1

这是因为第一个产品上方的所有元素都浮动而且从未被清除。

一个简单的解决方法是将此添加到您的css：

#products-list {
    clear: both;
}

Answer 2

此外，您的订购列表<ol>会直接跟随<div>，后跟<li>。 <li>应该直接在<ol>之后。

这是你拥有的：

<ol class="products-list" id="products-list">
    <div id="product-listing" onclick="location.href='http://www.martialgear.com/martial-arts-gear/sparring-gear/padded-weapons-protective-headgear.html';" style="cursor:pointer;" class="odd">
    <li class="item">

尝试将此更改为

<ol class="products-list" id="products-list">
    <li class="item">
    <div id="product-listing" onclick="location.href='http://www.martialgear.com/martial-arts-gear/sparring-gear/padded-weapons-protective-headgear.html';" style="cursor:pointer;" class="odd">

Answer 3

你的整个内容都在课程“item”中，你有以下代码。

.products-list li.item {border-bottom:1px solid #d9ddd3; padding:5px 10px 5px 10px; }
.products-list li.item:hover { background:#EEEEEE; }

因此，当您将鼠标悬停在产品上时，实际上是在“项目”上方盘旋。删除

.products-list li.item:hover { background:#EEEEEE; }

并将类似的悬停添加到悬停时想要换色的特定元素。

列表溢出到Div

3 个答案: