How to change css on multiple elements


Tags: javascript,jquery,html,css

Problem :

I want to make so that each 3 elements (top, middle and bottom) of my polygon changes color when you hover over it. I would normally do it with css: xxx:hover but since it involves 3 different elements that need to change at the same time, I can only assume that I need take a different approach. I assume some sort of javascript? Ideas?

CODEPEN: http://codepen.io/anon/pen/shfge

HTML

<div class="hex-row even">
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</div>
<div class="hex-row">
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</div>

CSS:

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}
.hex:hover {
  cursor: pointer;
}
.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;
}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}


Solution :

Not too hard, just target the .hex container and it's children like so:

.hex:hover .top {
  border-bottom-color: red;
}

.hex:hover .middle {
 background: Red;
}

.hex:hover .bottom {
  border-top-color: red;  
}

http://codepen.io/anon/pen/GboDw


    CSS Howto..

    iOS How to access Library in CSS Url's?

    CSS/PHP: How to make the next div appear on the side instead

    How to set different column in table to be different width in css?

    How apply css to div in catch statement using jquery

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    Switching styles (Class) on a function that show and hide a div tag content

    How to center a span in a div

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    How to get MetroUI CSS Datepicker value with javascript

    How to style 404 page in WAMP server

    How can I position a web page in the middle of the screen?

    How to make a collapsible with a single css drop shadow in Jquery mobile?

    How to swap class / id using jquery in a css list?

    How to target last row in a list with CSS?

    How can i dynamically change title of input type file?

    How to make my

    How to fix the Height for this area?

    How to blur the div below the section with CSS 3 without background image?

    How can I set inline css styles for an element with javascript?

    How to retrieve sibling content in jquery?

    How to make div's inside div responsive

    How do I position this image using CSS so it overlaps a div but displays inline?

    how do you link static pages in rails to your css files? [closed]

    How to ignore css class

    How to Create paragraph first letter uppercase in html & css (in special format)

    How to crop a rectangular image into a square using CSS?

    How to get 'div' shaped as a flag with CSS

    How to show/hide content based on a css class

    HTML/CSS: how to put all
  • in
      on the same line and centered [duplicate]