本文介绍了检查哪个元素在反应中处于悬停状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在用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}`}
 >

感谢您的帮助。

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

08-15 01:23