相关疑难解决方法(0)

我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.

目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).

当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？

我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.

我也尝试过使用身高,但这只是失败了.

我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.

所有和任何建议最受欢迎.

每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.

到目前为止,我所要做的就是让隐藏的div显示,但是没有缓和的过渡.

这是我在JSfiddle上的代码http://jsfiddle.net/9dsGP/

这是我的代码:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS:

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px; …

我是JavaScript的新手,我正在尝试创建一个简单的隐藏并显示div切换,尽管它不起作用.我不确定问题是什么 - 我最初有div display:none,然后当course-info-toggle点击类时,它应该转向display:block,然后transition向下.

有任何想法吗？

/* Toggle on course detail sections */
$(document).ready(function() {
  $('.course-info-toggle').click(function() {
    $('.toggle-content').toggleClass('.show');
  });
});

.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text …