When that is done another way the mouse over on one of the ends doesn't work and you get the background image shifting correctly on the end but not under the text. This way makes the link tag cover the entire span tag so both are always triggered on the native :hover state.
THE HTML:
<div class="button-container">
<span class="button-wrapper">
<a href="/fr/snapdragon-mobile-processor">Start</a>
</span>
</div>
<span class="button-wrapper">
<a href="/fr/snapdragon-mobile-processor">Start</a>
</span>
</div>
THE CSS:
#block-views-training-module-listing-block-2 .views-field-nid .field-content {
background: url("images/trainmod-start-blank-wide-sprite.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 30px;
position: relative;
/*width: 82px;*/
}
#block-views-training-module-listing-block-2 .views-field-nid a {
background: url("images/trainmod-start-blank-wide-sprite.png") no-repeat scroll 100% 0 transparent;
color: #666666;
display: block;
font-size: 14px;
font-weight: 600;
height: 30px;
line-height: 30px;
margin: 0 -20px 0 0;
padding: 0 30px 0 15px;
position: relative;
text-decoration: none;
/*width: 82px;*/
}
#block-views-training-module-listing-block-2 .views-field-nid .field-content:hover {
background-position: 0 100%;
}
#block-views-training-module-listing-block-2 .views-field-nid a:hover {
background-position: 100% 100%;
}
background: url("images/trainmod-start-blank-wide-sprite.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 30px;
position: relative;
/*width: 82px;*/
}
#block-views-training-module-listing-block-2 .views-field-nid a {
background: url("images/trainmod-start-blank-wide-sprite.png") no-repeat scroll 100% 0 transparent;
color: #666666;
display: block;
font-size: 14px;
font-weight: 600;
height: 30px;
line-height: 30px;
margin: 0 -20px 0 0;
padding: 0 30px 0 15px;
position: relative;
text-decoration: none;
/*width: 82px;*/
}
#block-views-training-module-listing-block-2 .views-field-nid .field-content:hover {
background-position: 0 100%;
}
#block-views-training-module-listing-block-2 .views-field-nid a:hover {
background-position: 100% 100%;
}
THE BACKGROUND IMAGE:
No comments:
Post a Comment