title: Bing Maps pushpin icon issues
body: <p>I have a custom set of icons I'm setting various pins too. When the mouse hovers over them I'd like to bring them to the front and change the style to a different icon.</p>
  
  <p>I use this code to create the pin. OnHover I see the new push pin and on mouseout it returns to how it was. However, it has transparent areas and I can see parts of the non-hover pushpin below it when hovering.</p>
  
  <p>For bringing it to the forefront have tried changing the zIndex value and as far as I can tell it does nothing. </p>
  
  <p>Do I need to refresh the map or something? </p>
  
  <p>Feels like there is something I'm missing.</p>
  
  <pre><code>function createImagePin(location, obj)
  {
      var smallPin = getSmallPin(obj);
  
      var pin = new Microsoft.Maps.Pushpin(location, {
          icon: smallPin.data,
          visible: true,
          anchor: new Microsoft.Maps.Point(smallPin.width / 2, smallPin.height / 2) //Align center of pushpin with location.
      });
  
      pin.dataTarget = obj;
  
      Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e)
      {
          if(e.targetType === 'pushpin')
          {
              var largePin = getLargePin(e.target.dataTarget);
              e.target.setOptions({ icon: largePin.data, anchor: new Microsoft.Maps.Point(largePin.width/2,largePin.height/2) });
          }
      });
  
      Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e)
      {
          if (e.targetType === 'pushpin')
          {
              var smallPin = getSmallPin(e.target.dataTarget);
              e.target.setOptions({ icon: smallPin.data, anchor: new Microsoft.Maps.Point(smallPin.width/2,smallPin.height/2) });
          }
      });
  
      return pin;
  }
  </code></pre>