CODEWITHSUNDEEP
htmlcsshover
Onebus
Onebus

Reputation: 1

Hover doesn't work when hovered div is inside another div

I am building webpage with school events. On my webpage I am trying to create div(eventContainer) in which I got another div(eventImgContainer) with an image, and this image when hover do an action, e.g. blur or opacity.

The problem is that it does not respond to hover when div with img is inside any other div.

I was looking at syntax related to hover like ">" or "+" or ', '... nothing seams to work. Any ideas why?

I really want to use only css for this/

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;
}

Upvotes: 0

Views: 2866

Answers (3)

Sudhanshu Jain
Sudhanshu Jain

Reputation: 534

first of all remove the z-index

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

and then correct the name of the class

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

Upvotes: 0

Eskaaa
Eskaaa

Reputation: 69

It works for me when I just change z-index: -1; to z-index: 1; And your last selector (eventimgcontainer) is wrong, should be "eventImgContainer". But your example works also with this lower case selector. The problem is only your z-index. 

.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 #Photo1  {
    opacity:0.5;
    width:400;
}

Upvotes: 1

Alexandre Nicolas
Alexandre Nicolas

Reputation: 1949

You last css rules is wrong

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

CSS is case sensitive !

And you shouldn't have negative z-index (you should remove the z-index property or set a positive value).

Upvotes: 2

Related Questions