我有元素 list 。悬停时,背景应突出显示每个元素的灰色。我还希望能够将鼠标悬停在“X”上以将其背景更改为红色。
但是,在下面的代码中,当我将鼠标悬停在每一行上时,元素背景位于“X”之上,无法将鼠标悬停在“X”上。
代码: http://jsfiddle.net/qhoc/7vtZT/2/
HTML:
<ul>
<li>
<a>Long title for Item 1</a>
<i class=icon></i>
</li>
<li>
<a>Item 2</a>
<i class=icon></i>
</li>
<li>
<a>Item 3</a>
<i class=icon></i>
</li>
<li>
<a>Item 4</a>
<i class=icon></i>
</li>
<li>
<a>Item 5</a>
<i class=icon></i>
</li>
</ul>
CSS:
ul {
border: 1px solid green;
overflow: hidden;
padding: 0;
list-style: none;
width: 100px;
}
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 20px;
white-space: nowrap;
width: 80px;
}
a:hover {
background: gray;
}
.icon {
display: inline-block;
float: right;
margin-top: -20px;
background: yellow;
}
.icon:before {
content: "X";
}
.icon:hover:before {
background: red;
}
问题如何更改 CSS(最好)以便能够将鼠标悬停在“X”上以更改其背景颜色并在 JS 中“可点击”,同时突出显示该行中的元素背景灰色?
现在我无法在“X”中 Hook “点击”事件,因为它一直在元素下方。
要求:
ul
的宽度固定为100px
"X"必须在每个
li a
元素的同一行,并保持在ul
的宽度内如果
a
中的文本太长,它必须放在“X”下,但不能显示在ul
框外。没有换行。每个
li a
都使用ellipsis
硬编码宽度以在长文本上显示“...”。这个宽度可以改变。没有Javascript。硬编码 CSS 位置还可以,但不太喜欢。
最佳答案
将 anchor css 从 inline-block
更改为 block
同样建议将宽度从 100px(硬编码)更改为 100% 我们的自动设置相同容器的宽度
关于javascript - 将列表项与另一个子元素重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19969166/