CSS: Наведите указатель мыши на один элемент, эффект другой?

Question

Пожалуйста, смотрите страницу здесь:

http://176.32.230.17/printingcrazy.com/branding-services 

Я пытаюсь добиться эффекта парения, так что если вы наведите курсор мыши на любой из перечисленных услуг, соответствующее изображение будет иметь границу, например.

И если вы наведите указатель мыши на изображение, соответствующий текст изменит цвет.

Элементы слева расположены в отдельном родительском блоке справа.

Да, я видел CSS: Hover one element, effect for multiple elements? и пробовал все, но не могу заставить его примениться к моим обстоятельствам.

Любая помощь будет действительно оценена!

<div class="servicepage"> 

<div class="serviceleft"> 
<img src="/digitalprint.jpg"> 
<img src="/dyesub.jpg"> 
</div> 

<div class="serviceright"> 
<ul> 
<li> 
<h3>Digital Print</h3> 
</li> 
<li> 
<h3>Dye Sublimation</h3> 
</li> 
</ul> 
</div> 

</div> 

Answer 1

здесь упрощенный пример. надеюсь, что это поможет вам начать работу.

В основном мы устанавливаем функции обратного вызова, когда мышь зависает и остается на div foo. И в этих функциях мы меняем свойства css img, в этом случае добавляем border и удаляя его.

http://jsfiddle.net/btevfik/YC2tg/

Jquery

$(document).ready(function() { 
    $(".foo").hover(function() { 
     $(".bar").css("border", "5px red solid"); 
    }); 
    $(".foo").mouseleave(function() { 
     $(".bar").css("border", "none"); 
    }); 
}); 

HTML

<div class="foo">HOVER HERE</div> 
<img class="bar" src="http://placekitten.com/100/100" /> 

Answer 2

Вы могли бы сделать это.

HTML:

<div class="servicepage"> 
    <div class="serviceleft"> 
     <img class="digitalprint" src="/digitalprint.jpg"> 
     <img class="dyesub" src="/dyesub.jpg"> 
    </div> 
    <div class="serviceright"> 
     <ul> 
      <li class="digitalprint"> 
       <h3>Digital Print</h3> 
      </li> 
      <li class="dyesub"> 
       <h3>Dye Sublimation</h3> 
      </li> 
     </ul> 
    </div> 
</div> 

Jquery:

$(".serviceleft > img").hover(

function() { 
    var imgclass = $(this).attr("class"); 
    $("li." + imgclass).css("color", "red"); 
}, 

function() { 
    var imgclass = $(this).attr("class"); 
    $("li." + imgclass).css("color", "black"); 
}); 

Answer 3

Я попытался воспроизвести код для разметки на сайте, и этот JQuery код должен работать, просто копировать/вставить его на вашем сайт.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".serviceright h3").mouseenter(function(){ 
      var indexH3 = $(this).parent().index(); 
      $(".serviceleft .spotlight").eq(indexH3).addClass("border"); 
     }); 
     $(".serviceright h3").mouseleave(function(){ 
      $(".serviceleft .spotlight").removeClass("border"); 
     }); 

     $(".serviceleft .spotlight").mouseenter(function(){ 
      var indexA = $(this).index(); 
      $(".serviceright h3").eq(indexA).addClass("redtext"); 
     }); 
     $(".serviceleft .spotlight").mouseleave(function(){ 
      $(".serviceright h3").removeClass("redtext"); 
     }); 
    }); 
</script> 

Вы должны добавить некоторые классы CSS для парения эффекта, например

.border { 
    border: 1px solid red; 
} 

.redtext { 
    color: red; 
} 

Установить свойства для парения эффекта, и если вам нужно переименовать эти классы, изменить эти имена в JQuery код также.

А вот DEMO