时间戳

首页 > 解决方案 > 如何在蚂蚁设计列表项上添加悬停

reactjs - 如何在蚂蚁设计列表项上添加悬停

问题描述

我对 ant 设计相当陌生，我想知道如何为下面显示的来自 antd 列表示例的代码片段添加悬停效果。 https://ant.design/components/list/#components-list-demo-vertical

<List
    itemLayout="vertical"
    size="large"
    pagination={{
      onChange: page => {
        console.log(page);
      },
      pageSize: 3,
    }}
    dataSource={listData}
    footer={
      <div>
        <b>ant design</b> footer part
      </div>
    }
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[
          <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
          <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
          <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
        ]}
        extra={
          <img
            width={272}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={item.avatar} />}
          title={<a href={item.href}>{item.title}</a>}
          description={item.description}
        />
        {item.content}
      </List.Item>
    )}
  />

标签： reactjsantd

解决方案

没有道具，选择元素类并添加您的样式。例如，将此代码添加到您的 css 文件中。

.ant-list-item:hover {
  box-shadow: 0 0 4px #eee;
}

推荐阅读