Andrus Andrus - 6 months ago 16
HTML Question

How to add border around whole description only on hover?

A shopping cart border should be drawn around the entire li element like so:

hover

I tried to use

.picturelist-item :hover {
border: thin ridge #bbb;
}


I tried to place this class to the li element and also to the div inside the li.
This draws the border around every element inside the li.
Border in div over all elements does not appear.
How can I fix that, so that the border appears around the entire product element on hover ?

Bootstrap3, jQuery-ui are used.



<html>
<head>

<style type="text/css">

.picture { border: none;
margin: 1px;
}

.picturelist-item :hover {
border: thin ridge #bbb;
}

img {
border: none;
}

.category-list li {
width: 130px;
float: left;
margin: 10px;
text-align: center;
}
.category-list {
list-style: none;
}


</style>
</head>
<body>
<ul class="category-list">
<li>
<div class="picturelist-item">
<a class="picture ui-corner-all" href="#">
<img src="http://placehold.it/70x100">
</a>
<div class="pildidnimekiri-nimetus">
<a href="#">
Peak's Glut.vaba leivajahu segu, pruun 450g
<br>
2,24 €
</a>
</div>
<form class="js-addtocart-form" method="post">
<span>
<input type="hidden" name="product" value="201120">
<input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
</span>
<input type="submit" value="Add to cart" class="btn btn-success btn-sm">
</form>
<a class="btn btn-warning" href="#">Add to favorites</a>
</div>
</li>
<li>
<div class="picturelist-item">
<a class="picture ui-corner-all" href="#">
<img alt="Peak's Glut.vaba Pannkoogijahu 300g"
src="http://placehold.it/70x100">
</a>
<div class="pildidnimekiri-nimetus">
<a href="#">
Peak's Glut.vaba Pannkoogijahu 300g

<br>


1,87 €
</a>
</div>

<form class="js-addtocart-form" method="post">
<span>
<input type="hidden" name="product" value="201122">
<input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
</span>
<input type="submit" value="Add to cart" class="btn btn-success btn-sm">
</form>
<a href="/store/Store/AddToWishList?Product=201122&amp" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
</div>
</li>
<li>
<div class="picturelist-item">
<a class="picture ui-corner-all" href="/store/Store/Details/201121?lang=et">
<img alt="Peak's Glut.vaba saiajahu segu 450g"
src="http://placehold.it/70x100">
</a>
<div class="pildidnimekiri-nimetus">
<a href="#">
Peak's Glut.vaba saiajahu segu 450g

<br>


1,93 €
</a>
</div>

<form class="js-addtocart-form" method="post">
<span>
<input type="hidden" name="product" value="201121">
<input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
</span>
<input type="submit" value="Add to cart" class="btn btn-success btn-sm">
</form>
<a href="/store/Store/AddToWishList?Product=201121&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
</div>
</li>
<li>
<div class="picturelist-item">
<a class="picture ui-corner-all" href="/store/Store/Details/201124?&amp;lang=et">
<img alt="Peak's Glut.vaba Tatrajahu 500g"
src="http://placehold.it/70x100">
</a>
<div class="pildidnimekiri-nimetus">
<a href="/store/Store/Details/201124?lang=et">
Peak's Glut.vaba Tatrajahu 500g

<br>


2,35 €
</a>
</div>

<form class="js-addtocart-form" method="post">
<span>
<input type="hidden" name="product" value="201124">
<input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
</span>
<input type="submit" value="Add to cart" class="btn btn-success btn-sm">
</form>
<a href="/store/Store/AddToWishList?Product=201124&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
</div>
</li>
<li>
<div class="picturelist-item">
<a class="picture ui-corner-all" href="/store/Store/Details/201123?lang=et">
<img alt="Peak's Glut.vaba universaalne küpsetusjahu 450g"
src="http://placehold.it/70x100">
</a>
<div class="pildidnimekiri-nimetus">
<a href="/store/Store/Details/201123?lang=et">
Peak's Glut.vaba universaalne küpsetusjahu 450g

<br>


2,35 €
</a>
</div>

<form class="js-addtocart-form" method="post">
<span>
<input type="hidden" name="product" value="201123">
<input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
</span>
<input type="submit" value="Add to cart" class="btn btn-success btn-sm">
</form>
<a href="/store/Store/AddToWishList?Product=201123&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
</div>
</li>
</ul>

</body>
</html>




Answer

It seems you just have a small issue in your style.

.picturelist-item:hover {
    border: thin ridge #bbb;
}

Remove the space between .picturelist-item and :hover. You'll then have a border that surrounds the entire element's container.

I'd also recommend adding a transparent border around the element. currently on hover, adding the border is adjusting the size by a few pixels, causing things to move on the page. If you had a transparent border, it solves that (there are other ways to solve it as well, this is just a simple way.

.picturelist-item  {
    border: thin ridge transparent;
}