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

    How to vertically align inline-block divs without vertical spaces using CSS?

    How to do a resizable link a:hover in CSS

    how to get fixed table columns width

    How Should I Send HTML/CSS Content To A Server?

    How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

    How to disable parent hover, when hovering over child

    Jquery: How to find if element has inline property (not in CSS)

    Google Font API uses browser detection. How to get all font variations for font-face

    How can I use css properties with different classes?

    jQuery - How to make images overlap when fading in and out?

    how to Put a img and text middle of a div

    CSS: How to display image icon before each h3 in CSS?

    How do I center this menu?

    how to add a border-radius css curl

    how to make css sub menu links longer than parent link

    How to change elevation property of paper-card?

    How can I change GWT's widget CSS values?

    How to make the menu contents center aligned?

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How can I create a horizontal selector in a form with only html and css?

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to use css with jsp's

    How can I keep the progress bar number value centered and on top?

    How to apply padding to an HTML input element?

    How to include transparency in html/css?

    How to combine multiple CSS declarations to shorthand

    How to set the padding of QTableView cells through CSS?

    css/html how to make logo appear after heading

    how to restrict the children element inside the parent element in css?

    How to align image to the right?