Question

我正在建设有学校活动的网页。在我的网页上，我正在尝试创建div（eventContainer），其中我有一个带有图像的另一个div（eventImgContainer），并且这个图像在悬停时执行操作，例如模糊或不透明。

问题是，当img的div在任何其他div中时，它不会响应悬停。

我正在查看与hover相关的语法，例如＆＃34;＆gt;＆＃34;或＆＃34; +＆＃34;或＆＃39;，＆＃39; ......没有任何接缝可以工作。有什么想法吗？

我真的只想在这个/

中使用css

HTML：

<div class="eventContainer">
  <div class="eventDescription"><!-- here code with event description--></div> 

  <div class="eventImgContainer">
    <img src="1_Zdjecia/event_1/1.jpg" id="Photo1" title="football">
    <p class="hidedText">Go to Gallery</p>
  </div>
</div>

CSS：

.eventContainer{
    z-index: -1;
    position:relative;
    margin:auto;
    left:0;
    right:0;
    width:700px;
    height:270px;
    background-color: #E6E6E6;
    border: 4px solid white;
}

.eventImgContainer{
    position:relative;
    width:375px;
    height:217px;   
    top:20px;
    left: 305px;
    margin:0;
}

.eventImgContainer img  {
    position:absolute;
    width:100%;
    display:block;
}

.eventimgcontainer:hover  #Photo1  {
    opacity:0.5;
    width:400;
}

Answer 1

首先删除z-index

.eventContainer{
  position:relative;
  margin:auto;
  left:0;
  right:0;
  width:700px;
  height:270px;
  background-color: #E6E6E6;
  border: 4px solid white;
}

然后更正类的名称

.eventImgContainer:hover #Photo1{
  opacity:0.5;
  width:400;
}

当悬停的div在另一个div内时，Hover不起作用

1 个答案: