javascript - 在 CSS 中的 img 悬停时显示模式

Question

这可能会令人困惑，但是当有人将鼠标悬停在表格或其他东西中的特定图像上时，我实际上是在尝试打开带有图像的模式。我有它，如果您将鼠标悬停在该图像上，它会使其变大，但我希望它在模态中打开。

这是我的代码片段

RenderItems(){
var items = this.state.ItemList;
var allItems = this.state.AllItems;
var rows = [];

for(let i = 0; i < items.length; i++){
            if(this.state.ItemSelected == "All Items"){
                rows.push(
                    <tr style={{backgroundColor: '#B7BCDF'}} id={items[i].ID} onClick={this.RowClick.bind(this)} key={i}>
                        <td  className="PartImage" style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}>
                            <img src={PartImage} alt="" width="50%"></img>
                        </td>

                        <td style={{width: '111px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}>
                            {items[i].PartName}
                        </td>

                        <td  style={{width: '94px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}>
                            {items[i].Vendor}
                        </td>

                        <td  style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}>
                            {items[i].PartNumber}
                        </td>

                        <td  style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}>
                            ${items[i].Price.toFixed(2)}
                        </td>

                        <td  style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}>
                            {items[i].QuantityOnHand}
                        </td>
                    </tr>
                )
            }

return (

            <div className="TableScroll">
                <table className="TableRows">
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>

        );


}

  render(){
   return(
    <div className="container">
      <div className="PartImageModal">
         <div className="ImageModalContent">
             <img src="">I'm an Image in a modal</img>
         </div>
       </div>
    </div>
   );

  }

这是我这部分的css

.PartImage img:hover{

}

.PartImageModal{
    position: relative;
    width: 35%;
    height: 45%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10%;
    background-color: white;
    display: none;
}

.ImageModalContent{
    width: 100%;
    height: 100%;
    display: block;
}

我的第一个想法是我可以将我的类 PartImage img:hover 更改为：

.PartImage img:hover{
 .PartImageModal{
   display: block;
 }
}

但这在 CSS 中是不允许的。

如果有人对我如何做到这一点有任何想法，我将不胜感激！谢谢！

标签： javascripthtmlcss

Answer 1

这就是我如何使用click打开模式的事件来实现画廊风格的显示。

希望这能给你一个开始的地方！

[].forEach.call(document.getElementsByTagName("img"), function(elem) {
  elem.addEventListener("click", function() {
      var modal = document.getElementById('modal');
      modal.classList.remove('hidden');
      modal.classList.add('show');
      modal.getElementsByTagName('img')[0].src = this.src;     
  });
});

 document.getElementById('modal').addEventListener("click", function() {
   	var modal = document.getElementById('modal');
      modal.classList.add('hidden');
      modal.classList.remove('show');
 });

img {
  height: 100px;
  width: auto;
}

#modal {
  position: absolute;
  top: 0;
  bottom: 30%;
  min-height: 300px;
  min-width: 300px;
  padding: 20px;
  background-color: darkblue;
}

#modal img {
  height: 300px;
  width: 300px;
}

.modal-state.hidden {
  display: none;
}

.modal-state.show {
  display: block;
}

<div>
  <table>
      <tr>
        <td><img src="http://writingexercises.co.uk/images2/randomimage/restaurant-view.jpg"/></td>
         <td><img src="http://writingexercises.co.uk/images2/randomimage/plane.jpg"/></td>
         <td><img src="http://writingexercises.co.uk/images2/randomimage/anchors.jpg"/></td>
         <td><img src="http://writingexercises.co.uk/images2/randomimage/hand-water.jpg"/></td>
         <td><img src="http://writingexercises.co.uk/images2/randomimage/graf.jpg"/></td>
         <td><img src="http://writingexercises.co.uk/images2/randomimage/cyclists.jpg"/></td>
      </tr>
  </table>
</div>

<div id="modal" class="modal-state hidden">
  <img src="#" />
</div>

我会从这里做什么：

• 研究如何将其从click触发事件更改为hover///mouseenter效果mouseleavemouseover
• 适当地设置你的模态
• 如果您的 HTML 结构需要，实现递归 HTML 输出

如果图像未加载，请在JSFiddle上查看

让我知道这是否可以帮助您/澄清任何问题。如果没有，请告诉我，我会尽力为您提供更具体的答案！