CSS: rollovers for links // Mash
Задача
Rollover ссылок.
Решение
Средствами JavaScript.
Однако
<p>Some text <a onMouseOver=".." onMouseOut=".."
href="http://.." title="зачитать целиком"><img src=".."
alt="зачитать целиком" width=".." height=".." /></a></p>
<p>Some text <a href="http://.." title="зачитать целиком"
class="more"><span>:: далее »</span></a></p>
Второй кусок кода выглядит привлекательнее, не так ли?
Как это работает
- Some long-long story and text link for «more» :: read more »
- Some long-long story and image link for «more» :: read more »
CSS:
a.more span {visibility: hidden;}
a.more span {behavior: url('morelnk.htc');}
a.more {background: url('next.gif') no-repeat -18px 51%;}
a.more:hover {background-position: 0px 51%;}
html>body a.more span {display: none;}
a.more:after {content: url('hidden.gif');}
morelnk.HTC:
<public:component />
<public:attach event="oncontentready" onevent="More()" />
<script language="JScript">
function More(){
innerHTML='<img width="18" height="10" border="0" />';
}
</script>
Q: hidden.gif?
A: Прозрачный гиф. Длина равна длине background-image, высота — 1px.
Q: Почему 51%?
A: Обход небольшого глюка Mozilla. Обожаю целые числа.
Q: <img width="18" height="10" border="0" />. А где src
?
A: Не нужен.
Q: Есть вопрос.
A: Хороший?
5 сентября 2003