Question

我正在制作一个广播电台时间表，我的问题是让我的css悬停在正常工作中。

这是完整的代码：

难度领域与我的代码的这一部分有关：

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

我想要做的是获取带有CSS类epg-item_media，media_img，media_body，epg-item-title的项目在悬停时显示，但它们无法正常工作，尽管我专门为它声明了CSS类：

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

对于如何让悬停在此表中正常工作，我将不胜感激。 CSS显示表格，但交互性有限。

Answer 1

如果我找到你，你可以简单地将项目的不透明度设置为0，opacity:0 导致以下css：

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

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

Working fiddle

干杯，

悬停不会显示在CSS中的DIV上

1 个答案: