0

Есть много <div>, разных классов, всего 49 классов.
Как сделать так, чтобы при наведении на один <div> все <div> этого класса изменяли border, ну точнее он появлялся красного цвета.

Я сделал так:

 var all = document.getElementsByTagName("DIV"); for(var i=0;i<all.length;i++){

    if(all[i].className!=''){

        all[i].onmouseover = function(e) {
        this.style.border = "2px solid red";
            for(var j=0;j<all.length;j++){

                if(all[j].className==this.className){
                    all[j].style.border = "2px solid red";

                    stopBubble(e);
                }
            }
        };

        all[i].onmouseout = function(e) {
            this.style.border = "0px";
            for(var j=0;j<all.length;j++){

                if(all[j].className==this.className){
                    all[j].style.border = "0px";
                    stopBubble(e);
                }
            }
        };}

Я чувствую, что это по-ламерски сделано, но не знаю как по-другому... К тому же в IE он тормозит...

2 ответа 2

1
<div id="outer" onmouseover="setBorder(true);" onmouseout="setBorder(false);" class="outer1">
  <div class="inner"> text1 </div>
  <div class="inner"> text2 </div>
  <div class="inner"> text3 </div>
  <div class="inner"> text4 </div>
</div>
<style type="text/css">
  .outer1 .inner { border: none; margin: 2px; }
  .outer2 .inner { border: #f00 2px solid; margin: 0px; }
</style>
<!-- 
  если нет возможности проставить классы,
  (а они, кстати, могут писаться типа class="inner MyClass1")
  можно прописать просто .outer1 div вместо .outer1 .inner.
  Обработчики ( onmouseover="setBorder(true);" onmouseout="setBorder(false);")
  можно добавлять к любому блоку.
-->
<script type="text/javascript">
function setBorder(red) {
  document.getElementById('outer').className = 'outer'+(red?'2':'1');
  }
<script>
0
0

я б с jQuery вариант сделал: $(document).ready(function(){ $("div").onmouseover(function(){ this.addClass("ClassName"); });

$("div").onmouseleave(function(){
    this.removeClass("ClassName");
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.