Обратится по классу
К сожалению не смог правильно задать вопрос гуглу, ищу телепатов :)
Суть в том что на сайте есть несколько участков, имеющих следующий вид: Код:
<div class="pole"> |
Вот наводите на див, будет меняться цвет ссылки:
<script type="text/javascript">
window.onload = function () {
var div = document.getElementsByClassName('pole')[0];
div.onmouseover = function () {
var a = div.getElementsByClassName('none')[0];
a.style.color = (a.style.color == '#000000' ? '#ff0000' : '#000000');
}
}
</script>
<div class="pole" style="width: 100px; height: 100px; border: 1px black solid;">
<label>
<a class="none" style="color: #000000;">ссылка</a>
</label>
</div>
|
Пример немного не работает в фф =)
З.Ы И почему именно [0] див? разве он тогда не возьмет только самый ранний? |
[MI_nor], фф скорее всего не так цвета обрабатывает, на счёт [0] не помню, но пример без указания индекса не сработает.
|
Vulkan, все проще, ваш вариант не кроссбраузерный:
<script type="text/javascript">
window.onload = function() {
var getElementsByClassName = function(getClass){
if(document.querySelectorAll) {
return document.querySelectorAll("." + getClass);
}
else if(document.getElementsByClassName) {
return document.getElementsByClassName(getClass);
}
else {
var list = document.getElementsByTagName('*'), i = list.length,
classArray = getClass.split(/\s+/), result = [];
while(i--) {
if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
result.push(list[i]);
}
}
return result;
}
};
var handler = ['mouseover','mouseout'], i = handler.length;
while(i--) {
getElementsByClassName('class')[0]['on'+handler[i]] = function () {
this.style.color = this.style.color == '' ? '#ff0000' : '';
}
}
};
</script>
<a href="#" class="class">ссылка</a>
|
monolithed, точно, совсем забыл про особенности getElementsByClass, забыл про кроссбраузерную реализацию.
|
monolithed, Но суть остается, ваш вариант тоже лишь для одного тега, но их несколько
|
Цитата:
Если вы об этом, то все просто решается:
<script type="text/javascript">
window.onload = function() {
var getElementsByClassName = function(getClass){
if(document.querySelectorAll) {
return document.querySelectorAll("." + getClass);
}
else if(document.getElementsByClassName) {
return document.getElementsByClassName(getClass);
}
else {
var list = document.getElementsByTagName('*'), i = list.length,
classArray = getClass.split(/\s+/),
result = [];
while(i--) {
if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
result.push(list[i]);
}
}
return result;
}
};
var clasess = getElementsByClassName('class'),
i = clasess.length;
while(i--) {
getElementsByClassName('class')[i].onmouseover = function () {
this.style.color = this.style.color == '' ? '#ff0000' : '';
}
}
};
</script>
<a href="#" class="class">ссылка</a>
<a href="#" class="class">ссылка</a>
|
<style type="text/css">
.pole {background:#ddf;height:100px}
.pole:hover a {color:#f00}
</style>
<div class="pole">
<label>
<a class="none">Ссилко</a>
</label>
</div>
И делов та. Толко ие 6 идёт лесом, но ослики как-нить переживут.) |
Цитата:
хотя на сколько я понят, ТС'y не совсем hover нужен.... |
| Часовой пояс GMT +3, время: 03:41. |