Question

我已阅读相关文章如何更改悬停一些不相关的div。但找不到我需要的东西。

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

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

我想悬停.item1班级更改.img1的CSS 与box-shadow: 0px 0px 43px 9px rgba(56,112,255,0.85); 当我将鼠标悬停在.img1上时，它会.item1更改background-color: rgba(0,141,183,0.9)的css {/ 1>

如果不能用css父子关系，怎么可以实现或jquery？

Answer 1

使用这段代码可以使用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)');
    });
});

希望这有帮助。

干杯!!

Answer 2

<强> 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', '');
});

<强>更新

<强> 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 3

这可以用css完成试试这个

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

Answer 4

使用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 5

不确定这是否与某些帖子不重复，但这里是如何使用jquery实现此目的。

＆＃13;

    $('.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

＆＃13;

<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>

＆＃13;

悬停不相关的div

5 个答案: