CODEWITHSUNDEEP
javascriptcssopacity
52hertz
52hertz

Reputation: 352

How to change opacity of child-element when hovering his parent

<section class="album" role="listitem" onmouseover="this.albumHeader.style.opacity = 0.6">
    <a href="@HrefHelper.ToAlbum(album.Title, 0)">
        <img src="@albumPreview.GenerateSrcHTML()" height="@albumPreview.PreviewHeight" width="@albumPreview.PreviewWidth" />
    </a>
    <header id="albumHeader">
        <p>@album.Title</p>
    </header>
</section>

This JS-code: this.albumHeader.style.opacity = 0.6 somewhy is erroneous: "Uncaught TypeError: Cannot read property 'style' of undefined". The idea is when user hovers <section class="album"... the <header> inside (which is by default opacity:0.0) becomes visible. How can I fix that?

Upvotes: 0

Views: 195

Answers (3)

jdforsythe
jdforsythe

Reputation: 1067

Based on your question in the comment of @GMchris answer, here's an example with animation:

section.album header {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

section.album:hover > header {
  opacity: 0.6;
}

Plunker example: click here

Upvotes: 1

Mark Evaul
Mark Evaul

Reputation: 653

onmouseover="document.getElementById('albumHeader').style.opacity = 0.6"

note that the opacity will stay .6 unless you change it on mouse out as well. A css solution would probably be easier to maintain.

Upvotes: -1

GMchris
GMchris

Reputation: 5648

You can set the following styles:

.parent:hover .child {
   opacity: 0.5;
}

Of course, replace the selectors with you own.

Upvotes: 2

Related Questions