markerclustererplus css change on hover

Question

Я работаю с Google Maps API v3 и библиотекой MarkerClustererPlus. Я бы предпочел не использовать растровые значки, а создавать пузырьки, используя styles и ClusterClass свойства объекта MarkerClusterer. Это мой style объект JS код:

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

И класс CSS:

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

Таким образом, эти серые пузыри с голубой каемочкой.

Мой вопрос:

Я хотел бы изменить некоторые свойства отдельного пузырька при наведении курсора мыши, скажем, изменить цвет или добавить тень. Могу ли я изменить класс CSS пузыря? Я потратил много времени, пытаясь понять это, и теперь я застрял. У меня это событие:

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

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

и это действительно меняет вариант класса CSS пузырь, но дисплей не изменится ... Следующий mc.repaint(), c.clusterIcon_.draw() не помогают.

Я видел эту тему: Marker Clusterer Plus change icon on hover , но это для изменения значка, а не свойств стиля. Это действительно возможно без изменения библиотеки? Любая помощь будет оценена по достоинству.

Answer 1

Вы можете установить класс DIV непосредственно:

c.clusterIcon_.div_.className='clusterHover' 

Но было бы гораздо проще, если вы используете :hover Псевдо-класс

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