Question

在悬停在锚点上时，我正在努力改变svg的颜色。当我将鼠标悬停在SVG上时，我会更改它，但是当我将鼠标悬停在旁边的链接上时，我会尝试更改它。

这是我的代码：

                                <li>

                                    <a  href="#" class="sedation">
                                        <span id="sedation"  >
                                        </span>
                                        Sedation Dentistry
                                    </a>
                                </li>
                                <li>
                                    <a id="" href="#" class="specialists">
                                        <span id="specialists"  >

                                        </span>
                                        Our Specialists
                                    </a>
                                </li>
                                <li>
                                    <a id="" href="#" class="contact">
                                        <span id="contact"  >
                                        </span>
                                        Contact Us
                                    </a>
                                </li>

我正在使用jquery将svg插入SPAN标记内。所以我想要做的是当我将鼠标悬停在一个锚点上时，svg的颜色会在css中发生变化。

Answer 1

您还没有包含任何CSS，因此我们不知道您尝试过什么。但是，以下应该有效：

A:hover rect
{
    fill: green;

}

请参阅demo fiddle here

可能让你绊倒的一个问题是，CSS中的SVG元素应该区分大小写。因此，例如A:hover RECT在Firefox中不起作用。 Chrome更宽容，因此它可以在那里工作。

Answer 2

使用CSS或jQuery。 CSS可能更简洁，更容易。

在CSS中：

a:hover > svg *{
  fill: green;
  stroke: white;
}

在jQuery中：

$('a').on('mouseover', function() {
  $(this).find('svg').children().css({
    'fill': 'green',
    'stroke': 'white'
  });
});
$('a').on('mouseleave', function() {
  $(this).find('svg').children().css({
    'fill': 'black',
    'stroke': 'black'
  });
});

同时使用fill和stroke，因为我不知道你的SVG是由什么组成的。虽然如果您的SVG具有形状和路径，您可以为每个定义属性。

＆＃13;

/* This is doing the same as the top CSS seclector.
 * Comment out one or the other
 */
$('a').on('mouseover', function() {
  $(this).find('svg').children().css({
    'fill': 'green',
    'stroke': 'white'
  });
});

$('a').on('mouseleave', function() {
  $(this).find('svg').children().css({
    'fill': 'black',
    'stroke': 'black'
  });
});

＆＃13;

/* This is doing the same as the jQuery snippet.
 * Comment out one or the other
 */
a:hover > svg *{
  fill: green;
  stroke: white;
}

svg {
  width: 40px;
  height: 40px;
  margin-top: 3px;
}

a {
  position: relative;
  display: inline-block;
  padding: 4px;
  top: 2em;
  left: 10em;
  text-decoration: none;
  background-color: #cfd;
  border-radius: 0.35em;
  
}
span {
  position: relative;
  display: inline-block;
  margin-right: 3px;
  top: -12px;
  color: #233;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<a href="#">
  <?xml version="1.0"?>
<svg viewBox="0 0 120 120" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle class="circle" cx="60" cy="60" r="50"/>
  <polyline points="30 50 45 90 90 45" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
</svg>
  <span>Hover Me</span>
</a>

＆＃13;

在悬停时更改SVG颜色

2 个答案: