Question

我正在尝试对图像进行效果处理，当用户将鼠标放在图像上时，会显示一个写有Read More ..

的按钮。

类似的东西：

但是我不知道如何用react-bootstrap做到这一点我试着看是否发生了什么，但是什么也没发生：

<div>
  <div className="view overlay">
      <Thumbnail src={item.image} className="img-fluid " />
         <div className="mask flex-center rgba-red-strong">
              <p className="white-text">Super light overlay</p>
         </div>
  </div>
</div>

有帮助吗？谢谢！

Answer 1

非常非常快，我做了一个代码示例，可能您必须修复CSS

let { Grid, Row, Col, Image,Overlay,Button,Tooltip } = ReactBootstrap;

function CustomPopover({ className, style }) {
  return (
    <div
      className={className}
      style={{
        ...style,
        position: 'absolute',
        backgroundColor: '#EEE',
        boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
        border: '1px solid #CCC',
        borderRadius: 3,
        marginLeft: -5,
        marginTop: 1,
        padding: 10

      }}
    >
      <strong>Read More</strong>
      </div>

  );
}


class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.getTarget = this.getTarget.bind(this);
    this.handleMouseOver = this.handleMouseOver.bind(this);

    this.handleMouseOut = this.handleMouseOut.bind(this);

    this.state = {
      show: false
    };
  }

  getTarget() {
    return ReactDOM.findDOMNode(this.target);
  }

  handleMouseOut() {
    this.setState({ show: false});
  }

  handleMouseOver() {
    this.setState({ show: true});
  }

  render() {
    const sharedProps = {
      container: this,
      target: this.getTarget,
      show: this.state.show
    };

    return (

<Grid>
  <Row>
    <Col xs={6} md={3}>
        <Image ref={button => {
            this.target = button;
          }} onMouseOut={this.handleMouseOut}
          onMouseOver={this.handleMouseOver}src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/los-5-libros-que-obama-te-recomienda-leer-para-lo-que-resta-de-verano-1534782301.jpg" responsive />

        <Overlay {...sharedProps} placement="bottom">
          <CustomPopover />
        </Overlay>

      </Col>
  </Row>
</Grid>
    );
  }
}

ReactDOM.render(
  <Example />, 
  document.getElementById('app')
);

Here an idea

屏幕截图：

希望能帮助您，告诉我您是否需要任何东西！

Answer 2

一个简单的解决方案可能是使用CSS，并避免一起使用react-bootstrap组件。这些思路可能对您有用：

HTML：

<div>
  <div className="view overlay hover-wrapper"> <!-- add hover-wrapper -->
   <Thumbnail src={item.image} className="img-fluid " />
   <div className="mask flex-center rgba-red-strong hover"> <!-- add hover -->
     <p className="white-text">Super light overlay</p>
   </div>
  </div>
</div>

CSS：

.hover-wrapper {
  position:relative;
  display:inline-block;
}

.hover {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
}

.hover:hover {
  opacity:1;
}

.hover p {
  background:black;
  color:white;
  padding:1rem;
}

或者，这是一个工作示例（进行了一些小的修改）：

.hover-wrapper {
  position:relative;
  display:inline-block;
}

.hover {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
}

.hover:hover {
  opacity:1;
}

.hover p {
  background:black;
  color:white;
  padding:1rem;
}

<div>
  <div class="view overlay hover-wrapper">
        <img src="https://via.placeholder.com/350x350" className="img-fluid " />
         <div class="mask flex-center rgba-red-strong hover">
              <p class="white-text">Super light overlay</p>
         </div>
  </div>
</div>

在图片缩略图中阅读更多内容

2 个答案: