我只想将鼠标悬停在Google地图自定义地图制作工具图片上。我正在使用图像路径来设置自定义图像的样式。样式完美运作。但是悬停不起作用。
这是我的代码
img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"] {
border: 4px solid #73cccc !important;
};
img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"]:hover{
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map_canvas" style="height:400px; width: 100%"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script>
var image = 'https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png';
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.423, -122.082),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var myPos = new google.maps.LatLng(37.4231054, -122.08239880000002);
var myMarker = new google.maps.Marker({position: myPos, map: map, icon: image });
</script>
有没有CSS解决方案,或者这与Google Map mouseover事件有关?
答案 0 :(得分:1)
这是我的解决方法
为标记添加这些事件侦听器
myMarker.addListener('mouseover', function() {
console.log("mouseover");
this.setOpacity(0.5);
});
myMarker.addListener('mouseout', function() {
console.log("mouseout");
this.setOpacity(1);
});
无需添加其他CSS以提高透明度
img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"] {
border: 4px solid #73cccc !important;
}
img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"]:hover {
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map_canvas" style="height:400px; width: 100%"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script>
var image = 'https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png';
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.423, -122.082),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var myPos = new google.maps.LatLng(37.4231054, -122.08239880000002);
var myMarker = new google.maps.Marker({
position: myPos,
map: map,
icon: image
});
myMarker.addListener('mouseover', function() {
console.log("mouseover");
this.setOpacity(0.5);
});
myMarker.addListener('mouseout', function() {
console.log("mouseout");
this.setOpacity(1);
});
</script>