1

Суть в том, чтобы при наведении мыши на определенный блок, менялись картинки внутри него.

Таких блоков много. Я сделал говнокод: http://meadesign.com.ua/amigo/eva/ Левая часть - там при наведении подменяются классы у блоков, и заменяются соответственно бакграунды, и картинки стают синими. Все работает, но код выглядит конечно увы и ах.

$('.leftcalc_block1').hover(function(){ /// При наведении мыши на блок
    $('.icon_car1').addClass('icon_car12'); // для определенного элемента добавляется другой класс
    $('.icon_circle1').addClass('icon_circle12'); // аналогично
}, function(){ // ну и когда мышь уводишь, то все стает на место.
    $('.icon_car1').removeClass('icon_car12');
    $('.icon_circle1').removeClass('icon_circle12');
    $('.icon_car' + label).addClass('icon_car' + label + '2');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                <div class="leftcalc_block1"> 
                <label class="my-custom-label">
                <input name="evacua" type="radio" value="1" checked/>
                    <div class="icon_circle icon_circle1"></div>
                    <div class="icon_car icon_car1"></div>
                </label>
                <div class="under_text">Легковой автомобиль</div>
                </div>
              

Это лишь пятая часть. В коде JS соответственно идут: $('.leftcalc_block2').hover.....$('.leftcalc_block3')... и т.д. Как это все сделать более компактным?

Как я могу себе это представить - парсим класс главного элемента (.leftcalc_block1), разлаживаем на массив, получаем 1. Ну а дальше все просто. Но никак спарсить я конкретный блок не могу. Так как методами

1)document.elementFromPoint(x, y)

2)document.addEventListener('mouseover', function (e) {
    currentElement = e.target;
});

Я могу получить любой из дочерних элементов нужного мне leftcalc_block1

1 ответ 1

2

Сделаем такие правки.

Вариант 2

Ещё упростили и выкинули JS часть

Рабочий пример на JSFiddle

  • CSS: используем general sibling combinator ~ для подсвечивания автомобилей. Также используем признак :hover над общим предком

.icon_circle {
    background: url(../img/minus.png) no-repeat;
    width: 39px;
    height: 40px;
    display: inline-block;
    margin-right: 40px;
}

.leftcalc_block:hover .icon_circle,
.my-custom-label > input[name=evacua]:checked + .icon_circle, 
.icon_circle.icon_hover {
    background: url(../img/plus.png) no-repeat;
}


.icon_car {
    width: 89px;
    height: 53px;
    display: inline-block;
}

.icon_car1 {
  background: url(../img/11.png) no-repeat;
}

.leftcalc_block:hover .icon_car1,
.my-custom-label > input[name=evacua]:checked ~ .icon_car1,
.icon_car1.icon_hover {
  background: url(../img/12.png) no-repeat;
}

.icon_car2 {
  background: url(../img/21.png) no-repeat;
}

.leftcalc_block:hover .icon_car2,
.my-custom-label > input[name=evacua]:checked ~ .icon_car2,
.icon_car2.icon_hover {
  background: url(../img/22.png) no-repeat;
}

.icon_car3 {
  background: url(../img/31.png) no-repeat;
}

.leftcalc_block:hover .icon_car3,
.my-custom-label > input[name=evacua]:checked ~ .icon_car3,
.icon_car3.icon_hover {
  background: url(../img/32.png) no-repeat;
}

.icon_car4 {
  background: url(../img/41.png) no-repeat;
}

.leftcalc_block:hover .icon_car4,
.my-custom-label > input[name=evacua]:checked ~ .icon_car4,
.icon_car4.icon_hover {
  background: url(../img/42.png) no-repeat;
}

.icon_car5 {
  background: url(../img/51.png) no-repeat;
}

.leftcalc_block:hover .icon_car5,
.my-custom-label > input[name=evacua]:checked ~ .icon_car5,
.icon_car5.icon_hover {
  background: url(../img/52.png) no-repeat;
}
  • JS: Выкинули $('.leftcalc_block').hover блок

  • HTML: тоже упростился


  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="1" checked/>
      <div class="icon_circle"></div>
      <div class="icon_car icon_car1"></div>
    </label>
    <div class="under_text">Легковой автомобиль</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="2"/>
      <div class="icon_circle"></div>
      <div class="icon_car icon_car2"></div>
    </label>
    <div class="under_text">Внедорожник</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="3"/>
      <div class="icon_circle"></div>
      <div class="icon_car icon_car3"></div>
    </label>
    <div class="under_text">Автобусы</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="4"/>
      <div class="icon_circle"></div>
      <div class="icon_car icon_car4"></div>
    </label>
    <div class="under_text">Микроавтобусы</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="5"/>
      <div class="icon_circle"></div>
      <div class="icon_car icon_car5"></div>
    </label>
    <div class="under_text">Грузовики</div>
  </div> 

Вариант 1

  • CSS: используем general sibling combinator ~ для подсвечивания автомобилей

.icon_circle {
    background: url(../img/minus.png) no-repeat;
    width: 39px;
    height: 40px;
    display: inline-block;
    margin-right: 40px;
}

.my-custom-label > input[name=evacua]:checked + .icon_circle, 
.icon_circle.icon_hover {
    background: url(../img/plus.png) no-repeat;
}


.icon_car {
    width: 89px;
    height: 53px;
    display: inline-block;
}

.icon_car1 {
  background: url(../img/11.png) no-repeat;
}

.my-custom-label > input[name=evacua]:checked ~ .icon_car1,
.icon_car1.icon_hover {
  background: url(../img/12.png) no-repeat;
}

.icon_car2 {
  background: url(../img/21.png) no-repeat;
}

.my-custom-label > input[name=evacua]:checked ~ .icon_car2,
.icon_car2.icon_hover {
  background: url(../img/22.png) no-repeat;
}

.icon_car3 {
  background: url(../img/31.png) no-repeat;
}

.my-custom-label > input[name=evacua]:checked ~ .icon_car3,
.icon_car3.icon_hover {
  background: url(../img/32.png) no-repeat;
}

.icon_car4 {
  background: url(../img/41.png) no-repeat;
}

.my-custom-label > input[name=evacua]:checked ~ .icon_car4,
.icon_car4.icon_hover {
  background: url(../img/42.png) no-repeat;
}

.icon_car5 {
  background: url(../img/51.png) no-repeat;
}

.my-custom-label > input[name=evacua]:checked ~ .icon_car5,
.icon_car5.icon_hover {
  background: url(../img/52.png) no-repeat;
}
  • JS: Очень упрощается

$('.leftcalc_block').hover(function(){
    $(this).find('.icon').addClass('icon_hover');
}, function(){
    $(this).find('.icon').removeClass('icon_hover');
});

//...
    label = $('input[name=evacua]:checked').val(); // 1,2,3,4,5
    // Больше не нужны
    // $('.icon_car').removeClass('icon_car22 icon_car32 icon_car12 icon_car42 icon_car52');
    // $('.icon_car' + label).addClass('icon_car' + label + '2');
    $('.label').html(label);
  • HTML: тоже упростился

  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="1" checked/>
      <div class="icon icon_circle"></div>
      <div class="icon icon_car icon_car1"></div>
    </label>
    <div class="under_text">Легковой автомобиль</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="2"/>
      <div class="icon icon_circle"></div>
      <div class="icon icon_car icon_car2"></div>
    </label>
    <div class="under_text">Внедорожник</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="3"/>
      <div class="icon icon_circle"></div>
      <div class="icon icon_car icon_car3"></div>
    </label>
    <div class="under_text">Автобусы</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="4"/>
      <div class="icon icon_circle"></div>
      <div class="icon icon_car icon_car4"></div>
    </label>
    <div class="under_text">Микроавтобусы</div>
  </div>
  <div class="leftcalc_block"> 
    <label class="my-custom-label">
      <input name="evacua" type="radio" value="5"/>
      <div class="icon icon_circle"></div>
      <div class="icon icon_car icon_car5"></div>
    </label>
    <div class="under_text">Грузовики</div>
  </div> 
1
  • Вот же я овощ. В js писал так: this.find('.icon').addClass('icon_hover'); Блин, думаю, какого оно не работает. И вообще забросил этот вариант. Спасибо огромное. А CSS я реально удивлен, даже не подумал что так можно.
    – Amigo9876
    24 апр 2019 в 8:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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