在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 effect
• 样式的模态HTML递归HTML输出<代码>H215<代码>F216

如果图像没有加载，可以在JSFiddle上查看

如果这对您有任何帮助/澄清任何问题，请让我知道。如果没有，请让我知道，我会试着给你一个更具体的答案！