CSS：过渡只影响最后一个元素

Question

所以我的网站上有 3 个社交媒体按钮。我正在为它们添加悬停效果，因此它们会变成红色并具有平滑的过渡效果。但由于某种原因，过渡效果只适用于最后一个 svg 图标。为什么以及如何更改它以便将其应用于所有这些

<div class="socials">
   <svg  xmlns="http://www.w3.org/2000/svg" width="25.029" height="25.029" viewBox="0 0 25.029 25.029">
      <g id="Icon_feather-instagram" data-name="Icon feather-instagram" transform="translate(1.5 1.5)">
          <path id="Path_1" data-name="Path 1" d="M8.507,3H19.522a5.507,5.507,0,0,1,5.507,5.507V19.522a5.507,5.507,0,0,1-5.507,5.507H8.507A5.507,5.507,0,0,1,3,19.522V8.507A5.507,5.507,0,0,1,8.507,3Z" transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
          <path id="Path_2" data-name="Path 2" d="M20.829,15.695a4.406,4.406,0,1,1-3.712-3.712,4.406,4.406,0,0,1,3.712,3.712Z" transform="translate(-5.408 -5.374)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
          <path id="Path_3" data-name="Path 3" d="M26.25,9.75h0" transform="translate(-9.177 -4.793)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
       </g>
   </svg>
</div>
<div class="socials">
   <svg xmlns="http://www.w3.org/2000/svg" width="24.797" height="26.183" viewBox="0 0 24.797 26.183">
      <path id="Icon_feather-github" data-name="Icon feather-github" d="M10.71,21.316C5.2,22.968,5.2,18.562,3,18.011M18.42,24.62V20.357a3.712,3.712,0,0,0-1.035-2.875c3.459-.386,7.093-1.7,7.093-7.71a5.991,5.991,0,0,0-1.651-4.13,5.584,5.584,0,0,0-.1-4.153s-1.3-.386-4.307,1.63a14.738,14.738,0,0,0-7.71,0C7.7,1.1,6.4,1.489,6.4,1.489a5.584,5.584,0,0,0-.1,4.153A5.992,5.992,0,0,0,4.652,9.805c0,5.97,3.635,7.281,7.093,7.71a3.712,3.712,0,0,0-1.035,2.842V24.62" transform="translate(-1.181 0.063)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
   </svg>
</div>
<div class="socials">
   <svg xmlns="http://www.w3.org/2000/svg" width="23.131" height="23.131" viewBox="0 0 23.131 23.131">
      <path id="Icon_awesome-linkedin" data-name="Icon awesome-linkedin" d="M21.478,2.25H1.647A1.659,1.659,0,0,0,0,3.918v19.8a1.659,1.659,0,0,0,1.647,1.668H21.478a1.664,1.664,0,0,0,1.652-1.668V3.918A1.664,1.664,0,0,0,21.478,2.25ZM6.991,22.076H3.563V11.038H7V22.076ZM5.277,9.53A1.988,1.988,0,1,1,7.264,7.542,1.989,1.989,0,0,1,5.277,9.53ZM19.842,22.076H16.413v-5.37c0-1.28-.026-2.927-1.781-2.927-1.786,0-2.06,1.394-2.06,2.835v5.463H9.144V11.038h3.289v1.508h.046a3.611,3.611,0,0,1,3.248-1.781c3.47,0,4.115,2.287,4.115,5.261Z" transform="translate(0 -2.25)" fill="#fff"/>
   </svg>
</div>

.socials:hover path{
    fill: #FF4141;
    transition: 0.5s ease;
}

Answer 1

因为属性fill的初始值是none，而最后一个是#FFF。从没有价值开始转变是不可能的。在路径标签中用 fill="#fff" 替换 fill="none" 对我有用。

如果您需要它们是透明的，您可以改用 rgba 值 (rgba(255,255,255,0))。

CSS：过渡只影响最后一个元素

CSS: transition only affecting last element

html

css

transition