Question

我有菜单。每个菜单项都有SVG图像和文本。使用<object>

嵌入SVG

<ul id="menu-content" class="menu-content collapse out">
  <li id="calculator">
    <a href="#">
      <tr>
        <td>
          <object type="image/svg+xml" data="assets/calculator.svg">
          </object>
        </td>
        <td class="menu-option">
          <span class="menu-option">
            Pricing & Services
          </span>
        </td>
      </tr>
    </a>
  </li>
  .....
</ul>

当我将鼠标悬停在菜单项上时，此项目的背景颜色会发生变化。但我还需要更改SVG颜色。现在我知道如何在您完全悬停时更改SVG颜色。但是当我悬停在父元素上时该怎么办

Answer 1

当您使用svg时，您可以使用fill和stroke属性而非常规background-color和color更改颜色。例如：

＆＃13;

li:hover {
  background-color: yellow;
}

li:hover circle {
  fill: violet;
  stroke: blue;
}

＆＃13;

<ul id="menu-content" class="menu-content collapse out">
  <li id="calculator">
    <a href="#">
      <tr>
        <td>
          <svg>
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
          </svg>
        </td>
        <td class="menu-option">
          <span class="menu-option">
            Pricing & Services
          </span>
        </td>
      </tr>
    </a>
  </li>
 </ul>

＆＃13;

Answer 2

只需将悬停侦听器添加到父元素即可。

var parent = document.querySelector('.parent')
parent.addEventListener('mouseover', function(){
  parent.children[0].style.backgroundColor = 'black';
})
parent.addEventListener('mouseout', function(){
  parent.children[0].style.backgroundColor = 'white';
})

.pretendThisIsTheSVG {\
  background-color: white;
  width:50px;
  height:50px;
  border:1px solid black;
}

.parent {
  width:100px;
  height:100px;
  border:1px solid red;
}

<div class="parent">
  <div class="pretendThisIsTheSVG">
  
  </div>
<div>

Answer 3

由于样式表规则不适用跨文档，因此无法使用css执行此操作。这可以使用javascript完成，如下所示：

var parent = document.querySelector('li')
parent.addEventListener('mouseover', function(event){
  var svg = event.target.querySelector('object').contentDocument;
  var styleElement = svg.createElementNS("http://www.w3.org/2000/svg", "style");
  styleElement.textContent = "svg * { fill: #fff }"; // add whatever you need here
  svg.appendChild(styleElement);
});

Answer 4

所以我做的是： 1）确保应用程序正在服务器上运行（我使用SQL> SQL> drop table temp; Table dropped. SQL> SQL> create table temp 2 ( 3 Store varchar2(12), 4 Sold_DT date, 5 Item number 6 ); Table created. SQL> SQL> insert into temp values ('CVS',to_date('01/22/2017 12:05:00 AM','MM/DD/YYYY HH:MI:SS AM'),5); 1 row created. SQL> insert into temp values ('CVS_S_Eleven',to_date('01/22/2017 10:41:00 AM','MM/DD/YYYY HH:MI:SS AM'),7); 1 row created. SQL> SQL> commit; Commit complete. SQL> SQL> select 2 store, 3 Sold_DT, 4 item 5 from temp 6 where 7 Sold_DT = (select max(Sold_DT) from temp) and 8 rownum < 2; STORE SOLD_DT ITEM ------------ --------- ---------- CVS_S_Eleven 22-JAN-17 7 SQL> SQL> spool off） 2）在index.html中，我给了SVG（id ='hat'）和父元素（id ='m-i-hat'）的id：

http server

3）在Index.js中：

<li id="m-i-hat">
  <a href="#" class="menu-item">
    <object class="menu-icon" id="hat" type="image/svg+xml" data="assets/hat.svg">
    </object>

Answer 5

我知道我来晚了，但是谷歌将我发给我同样的问题，但我没有找到解决方案，所以这就是我用的（希望它对某人有所帮助）：

CSS：

.roundedArea:hover > svg *,
.roundedArea:hover {
  background-color: yellowgreen;
  fill: #FFFFFF;
}

HTML结构：

    <a class="roundedArea">
      <svg>
          *i removed the svg code for reading comprehension*
      </svg>
    </a>

预览（当您将鼠标悬停在该区域时，其父色将变为绿色，而svg则变为白色）：

我只是摘录了一个片段，这里是：https://codepen.io/Demky/pen/XQQWyj

将鼠标悬停在父元素上时更改SVG的颜色

5 个答案: