CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
chuckd
chuckd

Reputation: 14550

Hovering over parent element to display overlayed child element

I have an image with a font awesome overlay of a plus. When I hover over the image (a tag) I want to display the plus, but I'm not sure if I have the correct css. The plus doesn't show when I hover over it!

Here is my code

a.registerTeacherAsHost:hover {
  cursor: pointer !important;
  opacity: 0.4;
}

a.registerTeacherAsHost:hover > .addTeacher {
  display: normal;
}
<a class="registerTeacherAsHost" [email protected]>
  <div class="thumbnail">
    <div>
      <img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
      <i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i>
    </div>

  </div>
</a>

Upvotes: 0

Views: 82

Answers (2)

Arun Sharma
Arun Sharma

Reputation: 1331

There's been plenty wrong with your CSS which has been discussed already. I am focusing on a quick solution which goes here. Some adjustments have been made in the HTML structure and you are advised to avoid inline CSS. Hope this is what you are looking for.

a.registerTeacherAsHost{
display:inline-block;
}

a.registerTeacherAsHost:hover .thumbnail img {
  cursor: pointer !important;
  opacity: 0.4;
}

a.registerTeacherAsHost:hover i.addTeacher {
  display: block;
  cursor: pointer !important;
}

.thumbnail{
position:relative;
max-width:100%;
}

i.addTeacher{
display:none;
z-index: 200;
position: absolute;
top: 35%;
right: 42%;
color: grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<a class="registerTeacherAsHost" [email protected]>
  <div class="thumbnail">
      <img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher">   
      <i class="addTeacher fa fa-plus fa-2x"></i>
     </div>
</a>

Upvotes: 1

Ajay Gupta
Ajay Gupta

Reputation: 2033

Your CSS should look like this

a.registerTeacherAsHost:hover {
    cursor: pointer !important;
    opacity: 0.4;
}
a.registerTeacherAsHost .addTeacher { display: none; }
a.registerTeacherAsHost:hover .addTeacher {
    display: block;
}

And the HTML

<a class="registerTeacherAsHost" [email protected]>
    <div class="thumbnail">
        <div>
            <img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
            <i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i>
        </div>
    </div>
</a>

There were three problems with your code,

  • You were using the ">" selector which will only select the child element (.addTeacher) which is right after the parent element (.registerTeacherAsHost) which in you case doesn't work.
  • Other than that, the problem was with HTML where you declared the CSS for .addTeacher in the style tag, browsers take the CSS in this tag into consideration over any other stylesheets. One thing that could've worked was adding an !important to a.registerTeacherAsHost:hover .addTeacher { display: block !important; }. But it's better to write styles in a stylesheet and avoid using the !important as much as possible.
  • Next thing was, you were using display: normal which I've never heard of before and I think the browser hasn't too. display: block does the job.

Here's a fiddle: https://jsfiddle.net/5ncprd90/

Hope it helps!

Upvotes: 1

Related Questions