在 div 鼠标悬停时修改图像

Posted 2023-02-22

【中文标题】在 div 鼠标悬停时修改图像

【英文标题】：Modify image on div mouseover

【发布时间】：2020-07-28 13:19:05

【问题描述】：

我有一张基本卡。

当我将鼠标悬停在卡片上时，我希望图像更改其src。 当我将鼠标悬停在<img/> 标签本身时，我可以更改图像，如下所示：

<img src=item.iconUrl
     onMouseOver=e => (e.currentTarget.src = item.iconHoverUrl)
     onMouseOut=e => (e.currentTarget.src = item.iconHoverUrl)
     className="mr-3 avatar-lg rounded"  
/>

但是当我超出它的范围时，我找不到任何方法来引用这张图片的src。 我尝试将src 的内容设置为一个变量并更改它在卡片鼠标悬停时的值，但这不会触发图像src 的更新，因此它也不起作用。

如果有帮助，这里是组件的代码：

<Card className="app-hover" style= marginTop: '10px', height: '92%', overflow: 'hidden' >
<CardBody className="p-3">
    <Media>
        <img src=item.iconUrl
            onMouseOver=e => (e.currentTarget.src = item.iconHoverUrl)
            onMouseOut=e => (e.currentTarget.src = item.iconHoverUrl)
            className="mr-3 avatar-lg rounded"  />
        <Media body>
            <Row style= marginLeft: '4px', marginTop: '15px' >
                <h5 className="mt-1 mb-0">this.props.i18n.language === 'en' ? item.title : item.titleFR</h5>
            </Row>
        </Media>
    </Media>
    <Row>
        <Col lg=6>
            <Media>
                <CreditCard className="icon-dual align-self-center mr-2"></CreditCard>
                <Media body>
                    <h5 className="mt-2 pt-1  font-size-16">this.props.i18n.language === 'en' ? 'Not Owned' : 'Non-Acquis'</h5>
                </Media>
            </Media>
        </Col>
        <Col lg=6>
            <Media>
                <Users className="icon-dual align-self-center mr-2"></Users>
                <Media body>
                    <h5 className="mt-2 pt-1 font-size-16">
                        
                            item.stats ? item.stats.users : ''
                        
                    </h5>
                </Media>
            </Media>
        </Col>

    </Row>

    <Row className="mt-2 border-top pt-2" style= paddingLeft: '8px', paddingRight: '8px' >
        <p className="text-muted">this.props.i18n.language === 'en' ? item.shortDescription : item.shortDescriptionFR</p>
    </Row>
</CardBody>

是否可以按照我的设置方式进行操作？从代码中您可以清楚地看到，图像是从 api 获取的，并且总是在变化，所以我不能简单地用 CSS 对动画进行硬编码。

【问题讨论】：

我认为ref in react 可以帮助你获得<img> dom 节点引用。

现在是时候让它像const [src, setSrc] = useState(item.iconUrl) 一样有状态，然后在鼠标事件上切换该状态变量？

@TomFinney 我以为我了解有状态组件，但由于我是 React 新手，所以我无法理解您刚刚解释的内容。你能举个例子吗？

【参考方案1】：

您不应该尝试“直接”更改 DOM，而应该调用一个改变状态的函数并使用来自状态本身的新图标。让我用一个例子来解释：

const [icon, setIcon] = useState("");

const onMouseOver = () => setIcon("the-over-icon");

const onMouseOut = () => setIcon("the-not-over-icon");

// ...
<Card onMouseOver=onMouseOver onMouseOut=onMouseOut>
    <img src=icon />
</Card>

【讨论】：

这似乎是对图像本身的一个很好的推荐，但它真的回答了我的问题吗？如果是这样，我不明白它与 Card 父级有何关系。

现在有意义吗？

【参考方案2】：

我会将 img 提取到功能组件中。在 Typescript 中类似。

import React from "react";
import  useState  from "react";

interface IMyImgProps
    iconUrl: string;
    iconHoverUrl: string;


export const MyImg: React.FunctionComponent<IMyImgProps> = props => 
    const [icon, setIcon] = useState(props.iconUrl);

    const onMouseOver = () => setIcon(props.iconHoverUrl);
    const onMouseOut = () => setIcon(props.iconUrl);

    return <img src=icon onMouseOver=onMouseOver onMouseOut=onMouseOut />

【讨论】：

这很好，但它没有按要求将其应用于卡。但是上面的答案进一步解释了如何将其应用于父元素。谢谢 ！ :)

您好，我看到以前的答案在更新之前不清楚。所以你可以像这样使用它： 将组件分解成更小的一次总是更好。您将获得更好的体验、测试等。