title: CSS Image Opacity Fade Transitions with multiple elements (class)
body: <p>Reference: <a href="http://www.sanandreasradio.com" rel="nofollow">http://www.sanandreasradio.com</a></p>
  
  <p>I have a bunch of images as buttons, and they currently have an opacity change on:hover. This is faded using CSS transitions (I only have it set up for webkit browsers for testing purposes). When the page first loads, everything works as expected, you can hover over an image and it's opacity gradually increases, and when it looses focus vice versa. </p>
  
  <p>When I click on an image I call a function (below) that sets the opacity of all of the image-buttons (class .station-button) opacity back to normal, then increases the opacity of the selected button to 1.0 (100%). Once that happens, the hover effect for other buttons no longer works (it also doesn't work for the selected button for some reason). The transition still works when clicking another button, but hover effects just stop working entirely.</p>
  
  <p>The way it would be working (as of right now, since it doesn't take into consideration the current button which is at opacity 1.0), is that ANY button I am hovering over should have its opacity gradually changed to 0.6, EVEN the selected one (which I also need to fix in some way).</p>
  
  <p>I have been staring at this for a long time without finding a solution.</p>
  
  <p>How do I go about doing the totally fixed version, where un-selected buttons (opacity !=1.0) will fade to opacity 0.6 on:hover, and fade to opacity 1.0 on:click, and the currently selected will be unaffected by on:hover?</p>
  
  <p>Here is the specific css and js.</p>
  
  <p>CSS:</p>
  
  <pre><code>.station-button {
    opacity:0.3;
    cursor:pointer;
    width:120px;
    height:120px;
    -webkit-transition:opacity .3s;
    -webkit-transition-timing-function:ease;
  }
  .station-button:hover {
    opacity:0.6;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function changestation(stationid) {
    mystation = document.getElementById(stationid);
    allofclass = document.getElementsByClassName("station-button");
    for (i = 0; i &lt; allofclass.length; i++) allofclass[i].style.opacity = 0.3;
    mystation.style.opacity = 1.0;
    currentstation = stationid;
    loadnext();
  }
  </code></pre>