markerclustererplus css change on hover

Question

I'm working with Google Maps API v3 and MarkerClustererPlus library. I would prefer not using the raster icons but rendering the bubbles using styles and ClusterClass properties of MarkerClusterer object. This is my style object in JS code:

var myClusterStyle = [{
        url: './icons/placeholder.png', //1x1 transparent png
        height: 40,
        width: 40,
        textColor: '#636363',
        textSize: 12
}];

And the CSS class:

.cluster {
    background-color: #EAE6DE;
    border-radius: 50%;
    border: 3px solid #ACCCFD;
    position: absolute; 
}

So, these are the grey bubbles with blue border.

My question is:

I would like to change some properties of an individual bubble on mouseover, let's say change the color or add the shadow. Could I change the CSS class of the bubble? I've spent a lot of time trying to figure this out and now I'm stuck. I have this event:

google.maps.event.addListener(mc,'mouseover',function(c){

    c.clusterIcon_.setValues({className_:'clusterHover'});
});

and it really changes the CSS class option of the bubble but the display doesn't change... following mc.repaint(), c.clusterIcon_.draw() don't help.

I have seen this thread: Marker Clusterer Plus change icon on hover but this is for changing the icon, not the style properties. Is this really possible without modifying the library? Any help would be appreciated.

Answer 1

You may set the class of the div directly:

c.clusterIcon_.div_.className='clusterHover'

But it would be much easier when you use the :hover-pseudo-class

.cluster:hover {
    /* some styles */
}