CODEWITHSUNDEEP
reactjsantd
chk189
chk189

Reputation: 1

How to add hover over on ant design list items

I am fairly new to ant design and I want to know how to add a hover-over effect for the below shown code snippet from antd list example. 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>
    )}
  />

Upvotes: 0

Views: 13478

Answers (1)

Fatemeh Qasemkhani
Fatemeh Qasemkhani

Reputation: 2042

There is no props for this,select the element class and add your style. for example add this code to your css file.

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

Upvotes: 1

Related Questions