CODEWITHSUNDEEP
htmlcsshover
Red Bottle
Red Bottle

Reputation: 3080

How to style other divs differently on hover of a particular div?

I have my html like this

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

I want to increase the size of #dfp_icon and decrease the size of #mediamath_icon and #facebook_icon when hovered on #dfp_icon.

Here is my CSS

#facebook_icon{ height: 80px; }

#mediamath_icon{ height: 80px; }

#dfp_icon{ height: 80px; }

#dfp_icon:hover{height: 100px;}

I tried this + and ~ operators but that can apply only the same style. Is it possible to style #mediamath_icon and facebook_icon differently on hovering #dfp_icon?

Upvotes: 1

Views: 86

Answers (5)

Rutvij07
Rutvij07

Reputation: 375

I have tried to change color and background color on hover and also changed width and height. 

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

Upvotes: 1

Atraye Ghosh
Atraye Ghosh

Reputation: 1

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

Upvotes: 0

Carl Binalla
Carl Binalla

Reputation: 5401

I'm not sure why #facebook_icon is not appearing, although it works in my machine

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

Or if you want for all icons, try this version

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

Upvotes: 1

zipal_
zipal_

Reputation: 465

You can do it! using a simple 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');
      });
    });

Upvotes: 0

Ali Ezzat Odeh
Ali Ezzat Odeh

Reputation: 2163

Try using javascript onmouseover then 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>

Upvotes: 1

Related Questions