javascript - Css 悬停选择器应该选择完整的行

Question

我希望整个行都被选中，而不仅仅是该行中的一个元素。此外，选择不应该关心填充和边距，而只采用所有元素的最大元素的全宽和大小。

JSFiddle:https://jsfiddle.net/t3uz2r52/1/HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Disc_Plain_red.svg/460px-Disc_Plain_red.svg.png" class="img-responsive status">
        </div>
        <div class="col-xs-4 myimg">
            <img src="https://i.ytimg.com/vi/KlULoQj3nao/maxresdefault.jpg" class="img-responsive">
        </div>
        <div class="col-xs-6 description">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                aliquyam erat,
            </p>
        </div>
    </div>
</div>

CSS:

.row :hover {
  background-color: green;
}

Answer 1

只需将您的 CSS 更改为

.row:hover {
  background-color: green;
}

因此，您可以将 :hover 选择器分配给整行。阅读更多关于 Pseudo-class selectors 的信息.

这是您更新的 jsfiddle .