时间戳

首页 > 解决方案 > 如何创建在悬停时显示图像的链接组件

html - 如何创建在悬停时显示图像的链接组件

问题描述

我正在尝试创建一个反应组件，其行为类似于维基百科的页面预览，但没有文本。将鼠标悬停在链接上时，我希望图像显示在文本上方或下方。

我制作了一个ImgCard显示a链接的组件，并在悬停时显示图像。我觉得我可能过度设计了组件本身，所以如果是这种情况，请随时简化它。在下面的示例中，我使用的是TailwindCSS。

到目前为止的问题：

处理这个问题的最佳方法是什么？

const {useState} = React;

function ImgCard({ src, alt, text }) {
  const [isShown, setIsShown] = useState(false);
  return (
    <React.Fragment>
      <a
        href={src}
        className="text-blue-600 visited:text-purple-600"
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}
      >
        {text}
      </a>
      {isShown && (
        <img
          className="max-w-xs rounded overflow-hidden shadow-lg absolute"
          src={src}
          alt={alt}
        />
      )}
    </React.Fragment>
  );
}

function Page(){
  return(
    <div className="max-w-xl mx-auto px-8">
    <h1 className="text-2xl text-gray-900 font-semibold">The Best Lorem Ever
    </h1>
      <div className="grid grid-cols-1 gap-4">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit <ImgCard text="spongebob 1" src="https://i.imgur.com/TYHtyCe.png" />. Nam imperdiet magna quis consectetur gravida. Nam maximus consectetur rhoncus. Nulla facilisi. Ut convallis risus at odio euismod, <ImgCard text="spongebob 2" src="https://i.imgur.com/tnOglmb.png" /> sodales tincidunt augue bibendum. Sed hendrerit arcu ut ipsum mattis, id eleifend sem dictum. Etiam finibus elementum vulputate. Suspendisse nec sem ex.
        </p>
        <p>
 <ImgCard text="spongebob 3" src="https://i.imgur.com/m8oAgs8.jpg" /> in porttitor sapien, ac egestas libero. Suspendisse potenti. Aliquam sed tempus ligula. Praesent efficitur aliquam varius. Proin ex libero, hendrerit sit amet massa ac, mollis semper nulla. Vestibulum ultrices rhoncus metus, vel pellentesque erat iaculis in. Duis ut ligula in lacus volutpat mattis maximus nec nunc. Sed euismod tortor non mauris porta fringilla. Cras aliquam quis odio sit amet dapibus. In et eros venenatis, interdum dui at, accumsan mauris. Proin nec pulvinar leo. Duis in turpis vel mi cursus venenatis. Sed dapibus elit leo, sit amet ornare nisi commodo
        </p>
        <p>
<ImgCard text="spongebob 4" src="https://i.imgur.com/vYCijFL.jpg"  /> Mauris vitae iaculis turpis, nec sodales diam. Duis euismod, velit tincidunt laoreet porta, sem nulla lobortis tellus, non fringilla ipsum mauris et massa. Pellentesque vel ante sem. Integer ut mauris aliquet dolor auctor porttitor ut eget sem. Vestibulum egestas tellus ut mi dignissim fringilla. Phasellus ut gravida quam, nec rutrum lectus. Fusce ut volutpat diam, vitae dignissim enim. Vivamus dapibus nunc eu neque porta, ut luctus est venenatis. Suspendisse eu neque eget lorem feugiat pharetra auctor auctor augue. Mauris malesuada id leo sit amet maximus. Morbi egestas placerat arcu at posuere. Nam hendrerit dignissim odio, quis gravida magna pulvinar sed. Ut tincidunt elit semper eleifend rhoncus. Aliquam erat volutpat. Vestibulum malesuada luctus rutrum. <ImgCard text="spongebob 5" src="https://i.imgur.com/LthzuJn.jpg"  />
        </p>
        </div>
      </div>
  )
}

// Render it
ReactDOM.render(
  <Page />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

标签： htmlcssreactjs

解决方案

完美，你发现了错字。解决第二个问题的最佳方法是创建一个相对于Link元素定位的容器。我做了一个代码框来提供一个例子。你可能想改进你的代码，我对TailwindCSS. https://codesandbox.io/s/tooltip-image-popup-lvcei 考虑到图像可能会溢出屏幕边框。Screen Border要解决这个问题，您可以计算和之间的距离Link。根据图像宽度和计算出的空间，您将图像类名更改为left-0或right-0

推荐阅读