css 按钮上的图标应在悬停时更改颜色：不能在新图标上使用现有代码

我在一个项目上工作，有一些由第三方的功能。
目前它的工作原理是这样的：
有一个按钮，有一个文本和一个图标图像（SVG）。最初按钮是白色和文本与图标是蓝色的。当我把鼠标悬停在它上面，按钮将其颜色更改为蓝色。为了避免按钮和项目上的项目具有相同的颜色（并变得不可见），在我之前工作的人也做了一些事情，将文本和图标颜色更改为白色。
下图：
100d 1xx 1c 1d 1x的字符串
现在，我被要求在同一个按钮上使用新的图像作为图标。我使用了一个现成的svg格式文件。
但现在，有一个问题。当我悬停在按钮与新的图标，只有文本改变其颜色为白色，图标保持蓝色，并消失在背景。

我正在做一项研究，以找出这可能是什么原因。
旧的图标/文件被称为“眼睛”，新的我命名为“视图”。
旧图标SVG（对不起，我不知道哪部分是相关的，哪部分不是，所以这里有一个完整的SVG）：

import { FC } from "react";

interface IEye {
  color: string;
}

export const Eye: FC<IEye> = ({ color }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      className={color}
    >
      <defs>
        <clipPath id="clipPath">
          <rect
            id="Rectangle_136"
            data-name="Rectangle 136"
            width="14"
            height="14"
          />
        </clipPath>
      </defs>
      <g id="eye" clipPath="url(#clipPath)">
        <path
          id="Path_450"
          data-name="Path 450"
          d="M13.575,5.052A7.725,7.725,0,0,0,7,1.106,7.725,7.725,0,0,0,.426,5.052a2.863,2.863,0,0,0,0,3.011A7.725,7.725,0,0,0,7,12.009a7.725,7.725,0,0,0,6.575-3.946,2.863,2.863,0,0,0,0-3.011Zm-.995,2.4A6.6,6.6,0,0,1,7,10.842a6.6,6.6,0,0,1-5.58-3.39,1.7,1.7,0,0,1,0-1.79A6.6,6.6,0,0,1,7,2.273a6.6,6.6,0,0,1,5.58,3.39,1.7,1.7,0,0,1,0,1.79Z"
          transform="translate(-0.001 0.442)"
        />
        <path
          id="Path_451"
          data-name="Path 451"
          d="M5.833,2.917a2.92,2.92,0,1,0,2.061.855,2.917,2.917,0,0,0-2.061-.855Zm0,4.667a1.75,1.75,0,1,1,1.237-.513A1.75,1.75,0,0,1,5.833,7.583Z"
          transform="translate(1.167 1.167)"
        />
      </g>
    </svg>
  );
};

字符串
新图标SVG：

import { FC } from "react";

interface IViews {
  color: string;
}

export const Views: FC<IViews> = ({ color }) => {
  return (
            <svg width="22" height="22" viewBox="0 0 22 22" className={color} xmlns="http://www.w3.org/2000/svg">
            <g id="views">
            <path d="M7.74999 21.15C7.29388 21.1463 6.84632 21.0258 6.44999 20.8L4.81999 19.85C4.5234 19.6803 4.26362 19.4532 4.05585 19.1819C3.84809 18.9106 3.69651 18.6006 3.60999 18.27C3.5185 17.9361 3.49437 17.5872 3.53901 17.2439C3.58365 16.9005 3.69616 16.5695 3.86999 16.27L4.30999 15.52C4.09417 15.2002 3.90038 14.8661 3.72999 14.52H2.82999C2.48856 14.5187 2.15072 14.4501 1.83578 14.3183C1.52083 14.1864 1.23494 13.9938 0.99444 13.7514C0.753936 13.5091 0.563524 13.2217 0.434075 12.9057C0.304627 12.5898 0.238679 12.2514 0.239994 11.91V10C0.242891 9.66634 0.311502 9.33652 0.441905 9.02939C0.572309 8.72225 0.76195 8.44382 0.999994 8.21C1.24005 7.96988 1.52547 7.7799 1.83964 7.65114C2.15382 7.52238 2.49047 7.45741 2.82999 7.46H3.70999C3.88164 7.11252 4.07885 6.77827 4.29999 6.46L3.85999 5.67C3.69038 5.37259 3.58165 5.04439 3.54016 4.70454C3.49866 4.36468 3.52523 4.01997 3.6183 3.69048C3.71138 3.361 3.8691 3.05333 4.08228 2.78542C4.29546 2.51751 4.55984 2.29471 4.85999 2.13L6.49999 1.19C6.79806 1.02307 7.1261 0.916522 7.46536 0.876439C7.80463 0.836357 8.14847 0.863526 8.47723 0.956396C8.80599 1.04927 9.11322 1.20601 9.38137 1.41768C9.64952 1.62935 9.87332 1.89179 10.04 2.19L10.47 2.94C10.823 2.92 11.1769 2.92 11.53 2.94L12 2.15C12.171 1.85444 12.3985 1.59546 12.6696 1.38785C12.9407 1.18023 13.2501 1.02805 13.58 0.939999C13.9136 0.845655 14.2629 0.820052 14.6067 0.864746C14.9505 0.909439 15.2816 1.0235 15.58 1.2L17.21 2.14C17.8064 2.48505 18.2415 3.05276 18.4196 3.7184C18.5978 4.38404 18.5044 5.09317 18.16 5.69L17.73 6.45C17.9551 6.7676 18.1557 7.1019 18.33 7.45H19.23C19.9187 7.45791 20.5764 7.73775 21.0597 8.22853C21.543 8.7193 21.8127 9.38122 21.81 10.07V12C21.8021 12.6853 21.525 13.34 21.0386 13.8227C20.5521 14.3054 19.8953 14.5774 19.21 14.58H18.32C18.1561 14.9043 17.9724 15.2182 17.77 15.52L18.22 16.31C18.3869 16.6081 18.4935 16.9361 18.5336 17.2754C18.5736 17.6146 18.5465 17.9585 18.4536 18.2872C18.3607 18.616 18.204 18.9232 17.9923 19.1914C17.7806 19.4595 17.5182 19.6833 17.22 19.85L15.58 20.79C15.2823 20.9583 14.9541 21.0659 14.6146 21.1067C14.275 21.1475 13.9307 21.1206 13.6016 21.0276C13.2725 20.9346 12.9651 20.7774 12.697 20.565C12.429 20.3526 12.2057 20.0892 12.04 19.79L11.6 19.04C11.2273 19.0699 10.8527 19.0699 10.48 19.04L10.02 19.82C9.7941 20.2235 9.46466 20.5595 9.06564 20.7933C8.66662 21.0271 8.21246 21.1502 7.74999 21.15ZM2.84999 9C2.55984 8.99936 2.28055 9.11036 2.06999 9.31C1.96798 9.41258 1.88721 9.53428 1.8323 9.66812C1.77739 9.80197 1.74942 9.94533 1.74999 10.09V11.97C1.76756 12.246 1.88845 12.5053 2.0886 12.6962C2.28875 12.887 2.55345 12.9955 2.82999 13H4.20999C4.35809 12.9976 4.50341 13.0403 4.62666 13.1225C4.7499 13.2047 4.84523 13.3224 4.89999 13.46C5.1331 14.0096 5.43555 14.5271 5.79999 15C5.88933 15.1196 5.94246 15.2623 5.9531 15.4112C5.96373 15.5601 5.93142 15.7089 5.85999 15.84L5.16999 17.01C5.02969 17.2664 4.99044 17.5661 5.05999 17.85C5.13577 18.1289 5.31921 18.3663 5.56999 18.51L7.19999 19.46C7.32515 19.5345 7.4642 19.5828 7.60864 19.6017C7.75309 19.6206 7.89987 19.6098 8.03999 19.57C8.32023 19.4917 8.55993 19.3093 8.70999 19.06L9.39999 17.86C9.47607 17.7326 9.58733 17.6299 9.72038 17.5643C9.85344 17.4987 10.0026 17.4729 10.15 17.49C10.7279 17.56 11.3121 17.56 11.89 17.49C12.0368 17.4665 12.1873 17.4884 12.3213 17.5527C12.4553 17.617 12.5665 17.7208 12.64 17.85L13.32 19.03C13.4646 19.2832 13.7039 19.4686 13.9851 19.5455C14.2664 19.6224 14.5667 19.5844 14.82 19.44L16.45 18.5C16.5767 18.4308 16.6881 18.3366 16.7775 18.2232C16.8669 18.1097 16.9323 17.9794 16.97 17.84C17.0395 17.5561 17.0003 17.2564 16.86 17L16.17 15.8C16.0895 15.6765 16.0467 15.5324 16.0467 15.385C16.0467 15.2376 16.0895 15.0935 16.17 14.97C16.5218 14.5157 16.8142 14.0184 17.04 13.49C17.0893 13.3479 17.183 13.2255 17.3073 13.1409C17.4315 13.0562 17.5798 13.0138 17.73 13.02H19.09C19.3773 13.0314 19.658 12.9318 19.874 12.742C20.0899 12.5521 20.2245 12.2864 20.25 12V10.1C20.2506 9.95533 20.2226 9.81197 20.1677 9.67812C20.1128 9.54428 20.032 9.42258 19.93 9.32C19.8304 9.21603 19.7109 9.13321 19.5786 9.07651C19.4463 9.01981 19.3039 8.99038 19.16 8.99H17.79C17.6417 8.98755 17.4973 8.94174 17.3747 8.85823C17.2521 8.77471 17.1566 8.65714 17.1 8.52C16.8667 7.97457 16.5606 7.46326 16.19 7C16.0999 6.88047 16.047 6.73699 16.0381 6.58755C16.0292 6.43811 16.0647 6.28937 16.14 6.16L16.82 4.98C16.9644 4.72669 17.0024 4.4264 16.9255 4.14513C16.8486 3.86386 16.6632 3.62462 16.41 3.48L14.78 2.5C14.5441 2.3635 14.2644 2.32405 14 2.39C13.7188 2.46638 13.4785 2.64932 13.33 2.9L12.64 4.1C12.5658 4.22917 12.4549 4.33334 12.3214 4.39924C12.1878 4.46513 12.0376 4.48977 11.89 4.47C11.3288 4.40004 10.7612 4.40004 10.2 4.47C10.0538 4.48904 9.9053 4.464 9.77346 4.39808C9.64161 4.33215 9.53246 4.22836 9.45999 4.1L8.73999 2.91C8.59351 2.6588 8.35429 2.47511 8.07379 2.39844C7.79328 2.32177 7.49389 2.35824 7.23999 2.5L5.59999 3.42C5.34708 3.56483 5.16128 3.80331 5.0827 4.08396C5.00412 4.3646 5.03906 4.6649 5.17999 4.92L5.85999 6.13C5.94341 6.26268 5.98255 6.41842 5.97177 6.57478C5.96098 6.73113 5.90084 6.88002 5.79999 7C5.43845 7.4604 5.13609 7.96433 4.89999 8.5C4.84407 8.63681 4.74846 8.75375 4.62548 8.83573C4.5025 8.91772 4.35779 8.961 4.20999 8.96H2.84999V9ZM11 15C10.2089 15 9.43551 14.7654 8.77771 14.3259C8.11992 13.8864 7.60723 13.2616 7.30448 12.5307C7.00173 11.7998 6.92251 10.9956 7.07685 10.2196C7.23119 9.44371 7.61216 8.73098 8.17157 8.17157C8.73098 7.61216 9.44371 7.2312 10.2196 7.07686C10.9956 6.92252 11.7998 7.00173 12.5307 7.30448C13.2616 7.60723 13.8863 8.11992 14.3259 8.77772C14.7654 9.43552 15 10.2089 15 11C15 12.0609 14.5786 13.0783 13.8284 13.8284C13.0783 14.5786 12.0609 15 11 15ZM11 8.5C10.5055 8.5 10.0222 8.64662 9.61107 8.92132C9.19995 9.19603 8.87951 9.58647 8.6903 10.0433C8.50108 10.5001 8.45157 11.0028 8.54803 11.4877C8.64449 11.9727 8.8826 12.4181 9.23223 12.7678C9.58186 13.1174 10.0273 13.3555 10.5123 13.452C10.9972 13.5484 11.4999 13.4989 11.9567 13.3097C12.4135 13.1205 12.804 12.8 13.0787 12.3889C13.3534 11.9778 13.5 11.4945 13.5 11C13.5 10.337 13.2366 9.70107 12.7678 9.23223C12.2989 8.76339 11.663 8.5 11 8.5Z" fill="#3E97FF"/>
            </g>
            </svg>
  );
};

型
正如你所看到的，在新文件中我添加了一些名为“颜色”的变量，它存在于旧文件中。如果我理解正确，这允许从外部设置特定的颜色。
有一个名为Popup的元素与相关的CSS文件，经过测试，我看到它确实是与此按钮相关的文件。
按钮的CSS块：

.buttonPrimary {
    ...

    svg {
      margin-left: 10px;
    }

    .color {
      fill: #4fa1f0;
    }

    &:hover {
      @extend %active-button-color;
      color: #fff;

      .color {
        fill: #fff;
      }
    }
  }

型
我可以看到，在悬停，它改变颜色为白色。但不是在我设置了新的图标按钮！
Popup.tsx文件返回以下块：

<div className={renderStyle()} onClick={() => setOpen(!open)}>
    <p>{title && title}</p>
    {renderContent()}
  </div>

型
RenderContent函数有以下“眼睛”图标块。

const renderContent = useCallback(() => 
  {
    // ...          
    else if (eye) 
    {   
      return <Eye color={styles.color} />;
    } 

    // ...

  }, []);

型
我为新图标添加了另一个else-if块：

else if (views) 
{   
    return <Views color={styles.color} />;
}

型
由于 Jmeter 图标图像显示正确，我相信其正确的方法。
渲染样式功能：

const renderStyle = useCallback(() => {
    if (primary) 
    {
      return Primary;
    } 

    // ...

  }, []);

型
最后是按钮实际放置在屏幕上并分配相关代码的代码：

<div className={styles.ViewsButton} onClick={resetViewsVisibility}>
            <Popup views primary title="Name"  filterShown={viewsShown} >
              <Views
                //... 
              />
            </Popup>
          </div>

型
我在研究这个问题时验证了什么，以及我到目前为止尝试了什么：
1.按钮仍然使用“views”和“primary”变量，所以在Popup. tsx中调用了相同的代码。我甚至尝试添加一个警报来确保这一点-是的，在两种情况下运行的函数相同。
1.该项目显示正确，因此svg文件也被正确加载。
1.鼠标悬停在上面时，文本会重新着色，但图像不会。
1.我不确定是否应该在svg中添加其他东西，我尝试在旧项目的tsx文件中只使用一个新的svg块，我只替换了它，留下了其他所有东西。
1.我想我确实在任何地方都用“视图”代替了可变的“眼睛”，但也许我错过了什么。
1.我相信它变量“颜色”图标tsx文件是一个这样做的伎俩，但无论出于何种原因，它不做任何新的文件。
1.我考虑过添加一个函数来使用“onMouseOver”事件重新着色图标，但我认为这是个坏主意，因为必须有一种方法来使用已经存在的代码，其次我仍然需要获得一个图标图像，而不是一个按钮，而是它里面的内容。所以必须看到它的单独id，动态加载它等等。

**总结如下：我相信在这两种情况下使用相同的代码，但在新的情况下，变量“颜色”要么没有在Popup.tsx文件中设置值，要么在图标tsx文件中什么也不做。

我可能会错过另一个地方，我应该添加“意见”除了“眼睛”，但在搜索“眼睛”，我没有找到任何其他地方。
请帮助我了解新图标与旧图标有什么不同。
谢谢你，叶夫根尼

css 按钮上的图标应在悬停时更改颜色：不能在新图标上使用现有代码

1条答案

相关问题

热门标签

最新问答