svg中各个路径/多边形的不同悬停

Question

我通过js访问svg。

<script type="text/javascript">

            $(function(){

    $("#stage").load('img/europa_regionen.svg',function(response){

        $(this).addClass("svgLoaded");

        if(!response){
            // Error loading SVG!
            // Make absolutely sure you are running this on a web server or localhost!
        }

    });
});

    </script>

我设法在我的css中改变一个svg中单个多边形的颜色：

[id$=_x3C_object_x3E_] {
    fill: #ffffff;
}

有没有办法在我的css中为该ID添加悬停效果，以便鼠标悬停时填充的颜色会发生变化？

Answer 1

您可以使用$(".textBox input").on("focus", function() { $(".placeholder").show().animate({ "margin-top": "0px", "font-size": "11px" }, 150); });（fiddle）：

执行此操作

.textBox {
  height: 50px;
}
.textBox input {
  border: none;
  border-bottom: 1px solid black;
  margin-top: 20px;
}
.textBox input:focus {
  outline: none;
  border-bottom: 1px solid #00B9F5;
}
.textBox input:focus::-webkit-input-placeholder {
  color: white;
}
.placeholder {
  display: none;
  position: absolute;
  color: #00B9F5;
  margin-top: 20px;
}