Hover unrelated divs

Question

Я читал связанные статьи, как изменить при наведении некоторых не связанных между собой div. Но я не мог найти то, что мне нужно.

<div class="sidebar"> 
    <div class="item1"></div> 
    <div class="item2"></div> 
</div> 

    <div class="pframe"> 
     <div class="img1"></div> 
    </div> 

Я хочу, чтобы при наведении курсора мыши на .item1 класса изменить CSS из .img1 с box-shadow: 0px 0px 43px 9px rgba(56,112,255,0.85); и когда я парить над .img1 он меняет CSS в .item1 с background-color: rgba(0,141,183,0.9)

Если это невозможно сделать с помощью CSS parent-child, как реализовать или jquery?

Answer 1

Использование Jquery легко реализовать.

$(function(){ 
    var item = $('.item1'); 
    var img1 = $('.img1'); 

    item.mouseover(function() { 
     img1.css({"box-shadow": "0px 0px 43px 9px rgba(56,112,255,0.85)"}); 
    }).mouseout(function() { 
     img1.css({"box-shadow": "none"}); 
    }); 


    img1.mouseover(function() { 
     item.css({"background-color": "rgba(0,141,183,0.9)"}); 
    }).mouseout(function() { 
     item.css({"background-color": "transparent"}); 
    }); 
}); 

Answer 2

это можно сделать с помощью CSS Попробуйте

.item1:hover .img1{ 
box-shadow: 0px 0px 43px 9px rgba(56,112,255,0.85); 
} 

Answer 3

Вы можете достичь желаемой функциональности с JQuery, используя этот кусок кода:

$(function(){ 
    var item = $('.item1'); 
    var img1 = $('.img1'); 
    item.on('mouseover',function(){ 
     img1.css('box-shadow','0px 0px 43px 9px rgba(56,112,255,0.85)'); 
    }); 
    img1.on('mouseover', function(){ 
     item.css('background-color','rgba(0,141,183,0.9)'); 
    }); 
}); 

Надеется, что это помогает.

Cheers !!

Answer 4

DEMO

Ну вы должны ориентироваться на конкретные элементы с его последним символом, то и здесь, как это:

var clas="";//global variables 
var lastChar=""; 
//attach mouseover event on element whose class starts with item 
$('div[class^="item"]').on('mouseover',function(){ 
    clas=$(this).attr('class'); //get the class of current element 
    lastChar = clas.substr(clas.length - 1); //get its last character 
    $(".pframe").find('.img'+lastChar).css('box-shadow', '0px 0px 43px 9px rgba(56,112,255,0.85)'); //find it in pframe and add css 
}).on('mouseout',function(){ 
    $(".pframe").find('.img'+lastChar).css('box-shadow', 'none'); 
    //remove once mouseout 
}); 

//attach mouseover event on element whose class starts with img 
$('div[class^="img"]').on('mouseover',function(){ 
    clas=$(this).attr('class'); 
    lastChar = clas.substr(clas.length - 1) 
    $(".sidebar").find('.item'+lastChar).css('background-color', 'rgba(0,141,183,0.9)'); 
}).on('mouseout',function(){ 
    $(".sidebar").find('.item'+lastChar).css('background-color', ''); 
}); 

---

UPDATE

UPDATED DEMO

Как отметил @roullie, это произойдет после 10-го предмета и после него, поскольку мы всегда получаем последний символ. Поэтому, если вы отредактируете свой html и добавьте класс, например item_1, item_2, а также img_1 и img_2, вы можете использовать метод ниже, чтобы вытащить точный elements.

var clas="";//global variables 
var lastChar=""; 
//attach mouseover event on element whose class starts with item 
$('div[class^="item_"]').on('mouseover',function(){ 
    clas=$(this).attr('class'); //get the class of current element 
    lastChar = clas.split('_')[1]; //split _ and get its exact character to match 
    $(".pframe").find('.img_'+lastChar).css('box-shadow', '0px 0px 43px 9px rgba(56,112,255,0.85)'); //find it in pframe and add css 
}).on('mouseout',function(){ 
    $(".pframe").find('.img_'+lastChar).css('box-shadow', 'none'); 
    //remove once mouseout 
}); 

//attach mouseover event on element whose class starts with img 
$('div[class^="img_"]').on('mouseover',function(){ 
    clas=$(this).attr('class'); 
    lastChar = clas.split('_')[1]; 
    $(".sidebar").find('.item_'+lastChar).css('background-color', 'rgba(0,141,183,0.9)'); 
}).on('mouseout',function(){ 
    $(".sidebar").find('.item_'+lastChar).css('background-color', ''); 
}); 

Answer 5

Не уверен, если это не дубликат какой-то пост, но здесь, как вы могли бы добиться этого с JQuery.

$('.item1').mouseover(function(e) { 
 
     $('.img1').css({ 
 
     "box-shadow": "0px 0px 43px 9px rgba(56,112,255,0.85)" 
 
     }); 
 
    }); //Getting to the image box shadow from mouse over event in class item1 
 

 
    $('.img1').mouseover(function(e) { 
 
     $('item1').css({ 
 
     "box-shadow": "background-color: rgba(0,141,183,0.9)" 
 
     }); 
 
    }); //Getting to the image box shadow from mouse over event in image

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div class="sidebar"> 
 
     <div class="item1"></div> 
 
     <div class="item2"></div> 
 
    </div> 
 

 
     <div class="pframe"> 
 
      <div class="img1"></div> 
 
     </div>