Kev O. Kev O. - 1 month ago 16
CSS Question

Css Hover Selector should select complete row

I want that the complete row is selected and not just an element in that row. Also the selection should not care about paddings and margins and just take the full width and the size of the biggest element for all elements.

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

Just change your CSS to

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

Thereby you can assign :hover selector to entire row. Read more about Pseudo-class selectors.

Here is you updated your jsfiddle.