在 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 中是不允许的。

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

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 / mouseleave / mouseover效果
• 适当地设计你的模态
• 如有必要，为您的 HTML 结构实现递归 HTML 输出

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

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