Помогни ни да направим Uroci.net по - богат! Добави урок

Hover ефект под IE и Firefox

accorp   трудност:    видян: 11243


Да разгледаме една част от подобен код:
.table1:hover{...}

Този код не работи заради втората част - :hover

Нека да направим един прост пример за работещ код съвместим с повечето браузъри.
В секция HEAD:

<style type="text/css">
.imgon{
border: 1px solid #FFFFFF;
}
.imgoff{
border: 1px solid #CCCCCC;
}
</style>
...

Сега нека да използваме това в IMG тага.
<img class="imgoff" onmouseover="this.className='imgon'" onmouseout="this.className='imgoff'" src="file.ext">

Първо: задаваме клас imgoff. Това означава, че по default нашата картинка ще приеме свойствата, който сме задали за този клас.

Второ: указваме, че при преминаването на курсора над картинката тя ще си присвои свойства от клас imgon.


И накрая: при махане на курсора от площта на картинката тя ще приеме свойствата на класа default, а именно клас imgoff.

Автор: accorp



Коментари (6)

Петков на 13.12 2006 в 17:42ч.
Да колко жалко че ХОВЕР-а работи за А елемент само :)
dimit_ar на 18.02 2008 в 09:34ч.
Тъкмо нещо такова търсех!!:)
Kimvaras на 28.03 2008 в 09:50ч.
А защо не се използва a:hover без да се използва JavaScript.
Ето пример за картинка с rollover ефект.


a.imglink
{
width:70px;
height:50px;
display:block;
background:url(image_out.jpg) no-repeat;
}
a.imglink:hover
{
background:url(image_over.jpg) no-repeat;
}

 
razielpld на 17.09 2008 в 17:32ч.
hover, не работи само за елементи "a" ... това показва колко сте наясно с материята ...
vladgad на 29.09 2008 в 23:58ч.
@Kimvaras - братле, прегледай пак кода от урока и се опитай да разбереш точно какво прави, до запетайката дет се вика. Ако след това смяташ че урока и това дет ти си написал/а е еднакво ше ти помогна да разбереш че не е:)
Та значи, целта на авторо е да ни покаже как да си направим картинка, която при посочване с мишката да си смени цвета на контурите (на border-a демек), а твоя код слага image_out.jpg и image_over.jpg като фон на таг от тип а (линк демек), т.е. при авторо колкото и да цъкаме на картинката нищо няма да стане, също така курсора остава стрелка, а не ръчичка, докато ти имаш линк и при посочването му се сменява картинката на фона на линка.

@Петков - откога бе братле:)) :hover можеш да го сложиш както на a, така и на p, img и т.н.:)
bgwolf на 21.12 2009 в 21:46ч.
Друг път пиши по-ясно за хора дет не знаят ;)

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com