检查哪个元素在反应中处于悬停状态 [英] Check which element is hovered in React

问题描述

我正在用Gatsby+Wordpress为我建立投资组合网站。我想知道是否可以悬停文件夹项目的名称和与之相关的图像？

我的想法是，如果PortfolioItemNameLink悬停，它会显示来自同一项目的图像。如何检查哪个项目处于悬停状态？

const PortfolioItemsText = () => {

  return (
    <StaticQuery
      query={graphql`
        {
          allWordpressWpPortfolio {
            edges {
              node {
                id
                slug
                title
                excerpt
                content
                featured_media {
                  source_url
                }
              }
            }
          }
        }
      `}
      render={props => (
        <Wrapper>
          <PortfolioImageWrapper>
            {props.allWordpressWpPortfolio.edges.map(edge => (
              <PortfolioImage
                src={edge.node.featured_media.source_url}
                alt="Thumbnail"
              />
            ))}
          </PortfolioImageWrapper>

          <PortfolioItemsWrapper>
            <PortfolioItems>
              {props.allWordpressWpPortfolio.edges.map(portfolioItem => (
                <PortfolioItem
                  style={currentStyle}
                  key={portfolioItem.node.id}
                >
                  <PortfolioItemNameLink
                    to={`/portfolio/${portfolioItem.node.slug}`}
                  >
                    <PortfolioItemNameLinkText>
                      {portfolioItem.node.title}
                    </PortfolioItemNameLinkText>
                  </PortfolioItemNameLink>
                </PortfolioItem>
              ))}
            </PortfolioItems>
          </PortfolioItemsWrapper>
        </Wrapper>
      )}
    />
  )
}

export default PortfolioItemsText

这是我的项目的屏幕截图。当我悬停标题时，我会让正确的图像可见，否则图像应该不可见。

提前谢谢！

推荐答案

它现在以我想要的方式工作。我认为我的问题表达得不好。如果我悬停投资组合项目标题，我会看到与该项目相关的图像。在后面的选择器中设置图像。以下是我的代码：

const PortfolioItemNameLink = styled(Link)`
  display: inline-block;
  z-index: -2;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  transition: 0.25s linear;
  &:hover {
    color: #fff;
  }
  &:after {
    content: "";

    background-image: ${props => `url(${props.itemimage}) `};
    background-size: 100%;
    width: 300px;
    height: 300px;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.25s linear;
    z-index: -1;
    visibility: hidden;
  }
  &:hover&:after {
    opacity: 0.7;
    visibility: visible;
  }
`

 <PortfolioItemNameLink
   to={`/portfolio/${portfolioItem.node.slug}`}
   itemimage={`${portfolioItem.node.featured_media.source_url}`}
 >

感谢您的帮助。

这篇关于检查哪个元素在反应中处于悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！