Question

当我将鼠标悬停在div上时，我需要更改SVG不透明度属性。问题是，我的div位于不同的容器中，其中一个主要容器用于网站的整个部分。有没有一种方法可以在不使用JS或jQuery的情况下更改不透明度？我提供了与代码相似的标记。（*注：我必须使用Oval-Copy-3 id更改圆内的不透明度值。）

<div id="section">
  <div id="tabs">
    <div id="tab1">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Rem tenetur dolore praesentium iure repellat nemo odio a beatae 
        optio, exercitationem, possimus, ratione facere. Quia assumenda eum 
        voluptate, delectus nobis pariatur.
      </p>
    </div>
  </div>
  <div id="dot1">
    <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" 
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- 
        rule="evenodd">
        <g id="home1" transform="translate(-910.000000, -1464.000000)" 
          fill="#FF6C6C">
          <g id="icon_2" transform="translate(910.000000, 1464.000000)">
            <circle id="Oval-Copy-3" opacity="0.259742374" cx="50" cy="50" 
              r="50">
            </circle>
            <circle id="Oval-Copy-4" stroke="#FF6C6C" cx="50.5" cy="50.5" 
              r="10.5">
            </circle>
          </g>
        </g>
      </g>
    </svg>
  </div>
</div>

将鼠标悬停在＃tab1上，更改＃Oval-Copy-4的不透明度

将鼠标悬停在不同容器中的div上时更改svg颜色

0 个答案: