Проблем с изкарване пред различните браузери...

M

Mp3Fun

Registered
Значи исках да направя когато потребител посочи с мишката върхо дадено място (Не да натиска, ами само като посочи) таблицата да променя color, text decoration и border.
Направил съм го така в css файла:

.mp3list table:hover{
background-color:#F2F2F2;
border:1px solid #CCCCCC;
}
.mp3list table {
border:1px solid #FFFFFF;
}
.mp3list td a:hover{
border:0px solid #FFFFFF;
text-decoration: none;
color:#FFA200;
}

А в кода на сайта е така:
<td valign="top" class="mp3list">
.. текста.. примерно още таблици и др.
</td>
Може да видите за какво говоря на http://fun-bg.org
Сега съм с Mozilla Firefox 2.0.0.12 :shock:
Може ли да ми помогнете и да ме посъветвате как да го направя това да работи на всичките браузери защото пробвах с по нова версия на Mozilla Firefox и други версий на Internet Explorer и там не работи :(
 
.mp3list table:hover{
background-color:#F2F2F2;
border:1px solid #CCCCCC;
}
.mp3list table {
border:1px solid #FFFFFF;
}
.mp3list td a:hover{
border:0px solid #FFFFFF;
text-decoration: none;
color:#FFA200;
}

Няма как да ти работи под IE6 защото се потдъжа :hover само на линкове.
На всички други е екстра. Освен IE7 там :hover се потдържа да повече (но не на всички елемент). И най-добре да го направиш с javascript.
 
Код: 
<script>
	var elements = []; //Тук ще се съдържат всички td-та с клас test
	
	// Това сабира всички елементти с клас test и ги слага в elements
	if (document.getElementsByClassName){ //това е ако потдържа селектиране по клас
		elements = document.getElementsByClassName('test');
	}else{
		// и ако не ги сабираме като проверяваме цялото дърво
		for (var i = 0; i < document.getElementsByTagName('*').length; i++){
			if (document.getElementsByTagName('*')[i].className.indexOf('test') > -1){
				elements.push(document.getElementsByTagName('*')[i]);
			}
		}
	}
	
	// Тук търсим за всеки елемент с класс test първия негов наследник с таг table и му закачваме евенти
	for (var i = 0; i < elements.length; i++){
		elements[i].getElementsByTagName('table')[0].onmouseover = function(){ //при преминаване с мишкато върху елемента се случва
			//това
			this.style.border = '1px solid #aaa';
			this.style.background = '#ccc';
		}
		elements[i].getElementsByTagName('table')[0].onmouseout = function(){ //когато мишкато напусне елемента се случва
			//това
			this.style.border = 'none';
			this.style.background = 'none';
		}
	}
	
</script>
Това го слагаш на края на файла. Променяш си класа и стиловете.
 
Малко отлконение по темата, но до кога ще се съобразявате със старите браузъри? Google вече официално не поддържат ИЕ6. Така смо им удължавате живота и си създавате мъки. ;)
 
shterev погледни тук http://www.w3schools.com/browsers/browsers_stats.asp процента е все още голям на потребление, макар и аз да не харесвам ИЕ6
 
tuizzl каза:
shterev погледни тук http://www.w3schools.com/browsers/browsers_stats.asp процента е все още голям на потребление, макар и аз да не харесвам ИЕ6
Увеличете...

за съжаление процента в България е още по-голям :)
 
Лошото е и че хората си го харесват и продължават ди си го използват. Обаче вече започнах да се натъквам на сайтове, който са изоставили поддръжката му и не знам за вас, ама скоро време и аз ще я зарежа, поне за повечето сайтове, който не са на Български език.
 
то не е толкова до харесване, а просто не може да им се обясни, че не е добре това, което го правят. Аз все още на много приятели не мога да им обясна, че трябва да си сложат нов browser. Те просто не виждат смисъл в това.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе