如何在特定div的悬停时以不同方式设置其他div的样式？

Question

我有这样的HTML

<div class="add-lineitem-block whiteBgRow">
  <div class="add-link">
    <span class="add-icn">
      <img class="add-icn-img" title="Add Lineitem" src="/newlayout/images/add-icn.png" alt="" style="display: none;">
    </span>
  </div> 
  <div class="lineitem-icn-nav" style="">
    <span class="mediamath-icn serverjs" ref="MEDIAMATH">
      <img id="mediamath_icon" title="Add a Mediamath Lineitem" src="/newlayout/images/mediamath-icn.png" alt="">    
    </span>
    <span class="dfp-icn serverjs" ref="DFP">
      <img id="dfp_icon" title="Add a DFP Lineitem" src="/newlayout/images/dfp-icn.png" alt="">    
    </span>
    <span class="fb-icn serverjs" ref="FB">
      <img id="facebook_icon" title="Add a Facebook Lineitem" src="/newlayout/images/fb-icn.png" alt="">
    </span>
  </div>
</div>

我希望在#dfp_icon上悬停时增加#mediamath_icon的尺寸并减小#facebook_icon和#dfp_icon的尺寸。

这是我的CSS

#facebook_icon{ height: 80px; }

#mediamath_icon{ height: 80px; }

#dfp_icon{ height: 80px; }

#dfp_icon:hover{height: 100px;}

我尝试了这个+和~运算符，但这只能应用相同的样式。是否可以在悬停#mediamath_icon时对facebook_icon和#dfp_icon设置不同的方式？

Answer 1

尝试使用javascript onmouseover，然后toggleclass：

function myFunction() {
  var element = document.getElementById("myDIV1");

  element.onmouseover = function() {
    element.classList.toggle("bigger-size");
  };

}

myFunction();

.standerd-size {
  height: 20px;
}

.bigger-size {
  height: 100px;
}

<div id="myDIV1" class="standerd-size">
  <h1>Hello</h1>
</div>
<div id="myDIV2">
  <h1>1</h1>
</div>

Answer 2

我试图在悬停时更改颜色和背景颜色，也改变了宽度和高度。

.two:hover {
  background-color: yellow;
  font-size: 30px;
  width: 200px;
  height: 50px;
}

.one:hover {
  background-color: black;
  color: white;
  font-size: 20px;
}

<div class="one"> Hello</div>
<div class="two"> Hello Again</div>

Answer 3

我不确定为什么#facebook_icon没有出现，虽然它可以在我的机器上运行

$(document).ready(function() {
  $('#dfp_icon').hover(function() {
    $('#mediamath_icon').css('width', '40px');
    $('#mediamath_icon').css('height', '40px');
    $('#facebook_icon').css('width', '40px');
    $('#facebook_icon').css('height', '40px');
    $(this).css('width',
      '120px');
    $(this).css('height', '120px');
  }, function() {
    $('#mediamath_icon').css('width', '80px');
    $('#mediamath_icon').css('height', '80px');
    $('#facebook_icon').css('width', '80px');
    $('#facebook_icon').css('height', '80px');
    $(this).css('width', '80px');
    $(this).css('height', '80px');
  });
});

#mediamath_icon {
  height: 80px;
  width: 80px;
  border: 1px solid green;
}

#dfp_icon {
  height: 80px;
  width: 80px;
  border: 1px solid blue;
}

#facebook_icon {
  height: 80px;
  width: 80px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="mediamath_icon">
</div>
<div>
  <img id="dfp_icon">
</div>
<div>
  <img id="facebook_icon">
</div>

或者，如果您想要所有图标，请尝试此版本

$(document).ready(function() {
  $('.icons').hover(function() {
    $('.icons').css('width', '40px');
    $('.icons').css('height', '40px');
    $(this).css('width', '120px');
    $(this).css('height', '120px');
  }, function() {
    $('.icons').css('width', '80px');
    $('.icons').css('height', '80px');
    $(this).css('width', '80px');
    $(this).css('height', '80px');
  });
});

#mediamath_icon {
  height: 80px;
  width: 80px;
  border: 1px solid green;
}

#dfp_icon {
  height: 80px;
  width: 80px;
  border: 1px solid blue;
}

#facebook_icon {
  height: 80px;
  width: 80px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="mediamath_icon" class="icons">
</div>
<div>
  <img id="dfp_icon" class="icons">
</div>
<div>
  <img id="facebook_icon" class="icons">
</div>

Answer 4

你可以做到！使用简单的jQuery。

$(function() {
      $('#dfp_icon').hover(function() {
        $('#mediamath_icon').css('height', '40px');
        $('#facebook_icon').css('height', '40px');
      }, function() {
        // on mouseout, reset the height
        $('#mediamath_icon').css('height', '80px');
        $('#facebook_icon').css('height', '80px');
      });
    });

Answer 5

#dfp-icon:hover{height:100px;}
#dfp-icon:hover #mediamath-icn{height:70px;}
#dfp-icon:hover #fb-icn{height:70px;}