I have attempted to include a link (href) in the cart-button class using the following HTML code:
<div class="cart-button" href="#shopping-cart" alt="view-shopping-cart"><span>Shopping Cart (0)</span>
<div class="cart-dropdown">
<p class="emptycart">Your shopping cart is empty.</p>
</div>
</div>
Despite adding the href to the cart-button class, clicking on the button does not direct me to the specified href page.
Is it permissible to insert a href into a div as shown above, or would this be considered incorrect?
Here is the CSS corresponding to the HTML code provided:
.cart-button {
position: relative;
left: 700px;
bottom: 57px;
width: 180px;
height:30px;
cursor: pointer;
background: url("images/cart-sprite.png") no-repeat 0 0;
}
.cart-button:hover { background: url("images/cart-sprite.png") no-repeat 0 -30px; }
.cart-button span {
white-space: nowrap;
position: absolute;
font-size: 13px;
font-weight: bold;
color: #373737;
padding: 9px 10px 10px 53px;
}
.cart-button span:hover { color: #000; }
.cart-dropdown {
position: relative;
top: 30px;
right: 71px;
width: 250px;
height: 100px;
background: #fff;
border: 1px solid #ddd;
display: none;
opacity: 0;
}
.cart-button:hover .cart-dropdown {
display: block;
opacity: 1;
}
.emptycart {
position: relative;
font-size: 11px;
font-weight: bold;
padding-top: 8px;
padding-bottom: 8px;
color: #fff;
background: #202020;
text-align: center;
}