CODEWITHSUNDEEP
jqueryhtmlcss
avenas8808
avenas8808

Reputation: 1659

Hover does not display on DIVs in css

I am making a radio station schedule, and my problem is getting the hover in my css to work correctly.

This is the full code:

http://pastebin.com/hyBtmVpE

The area of difficulty relates to this part of my code:

<body>
    <!-- Page Content -->
    <div class="container">

        <header class="main-header">
      </ul>
</header>
            <div class="main-content">
        <div class="grid">
               <div class="grid__item">
          <div class="epg-root js-epg-root"><div class="grid grid--full epg js-epg"><div class="grid__item one-whole epg-controls"><button class="prev js-left"><i class="icon-wedge-left"></i></button><button class="next js-right"><i class="icon-wedge-right"></i></button></div><div class="grid__item one-tenth epg-left"><ol class="days js-days"><li class="mon">Mon</li><li class="tues">Tues</li><li class="wed">Wed</li><li class="thurs">Thurs</li><li class="fri">Fri</li><li class="sat live">Sat</li><li class="sun">Sun</li></ol></div><div class="grid__item nine-tenths schedule-scroll js-scroll"><table class="epg-table js-epg-table"><thead><tr class="times"><th colspan="60">00:00</th><th colspan="60">01:00</th><th colspan="60">02:00</th><th colspan="60">03:00</th><th colspan="60">04:00</th><th colspan="60">05:00</th><th colspan="60">06:00</th><th colspan="60">07:00</th><th colspan="60">08:00</th><th colspan="60">09:00</th><th colspan="60">10:00</th><th colspan="60">11:00</th><th colspan="60" class="active">12:00</th><th colspan="60">13:00</th><th colspan="60">14:00</th><th colspan="60">15:00</th><th colspan="60">16:00</th><th colspan="60">17:00</th><th colspan="60">18:00</th><th colspan="60">19:00</th><th colspan="60">20:00</th><th colspan="60">21:00</th><th colspan="60">22:00</th><th colspan="60">23:00</th></tr></thead><tbody><tr class="mon js-day"><td colspan="60"><div class="epg-item media"><img src="Musicbox.png" alt="Media Thumb" class="media__img"><div class="media__body"><h5 class="epg-item-title">The Late Show - Rachael Roe</h5><div class="epg-item-details"><p>More music!</p></div></div></div></td><td colspan="300"><div class="epg-item media"><img src="hollywood.png" alt="Media Thumb" class="media__img"><div class="media__body"><h5 class="epg-item-title">John Doe</h5><div class="epg-item-details"><p>Music and entertainment for through the night with Jack</p></div></div></div></td><td colspan="240"><div class="epg-item media"><img src="breakfast.png" alt="Media Thumb" class="media__img"><div class="media__body"><h5 class="epg-item-title">John Smith @ Breakfast</h5><div class="epg-item-details"><p>Waking up London with today's best music</p></div></div></div></td><td colspan="240"><div class="epg-item media"><img src="breakfast.png" alt="Media Thumb" class="media__img"><div class="media__body"><h5 class="epg-item-title">Daytime</h5><div class="epg-item-details"><p>Today's Best Music through the day for London</p></div></div></div></td></tr></tbody></table><div class="epg-now js-epg-now" style="left: 1175.6px;"></div></div></div></div>
</div>

What I am trying to do is get items with CSS classes epg-item_media, media_img, media_body, epg-item-title to appear on hover, but they are not working, despite me declaring CSS classes specifically for it:

    .epg-table .expanded .epg-item {
  background-color: #fff;
}
.epg-table .expanded .epg-item:hover {
  background: #fff;
  color: #343434;
}
.epg-item:hover {
/* EPG item hover */
  background: #e5e5e5;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.live .epg-item {
  background-color: #ee7202;
  color: #fff;
}
.live.expanded .epg-item {
/* Expanded EPG item */
  background-color: #ee7202;
}
.live.expanded .epg-item:hover {
  background-color: #ee7202;
  color: #fff;
}
.live.expanded .epg-item .media__img {
  border-color: #fff;
  background-color: #fff;
}
.highlight .epg-item:hover {
/* Live EPG item hover */
  color: #fff;
  background: #ee7202;
}
.epg-item .media__img {
  border-color: #525964;
}

I would appreciate any help or suggestions on how I can get the hover to work properly in this table; the CSS displays the table, but interactivity is limited.

Upvotes: 0

Views: 74

Answers (1)

Evochrome
Evochrome

Reputation: 1215

If I get you right, you can simply set the opacity of the items to 0, opacity:0 Resulting in the following css:

.epg-item {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.epg-item:hover{
  opacity: 1;
}

Working fiddle

Cheers,

Upvotes: 1

Related Questions