Question

早上好，我在Div中有一个Div，孩子div是隐藏的，但是当母亲div徘徊时显示。我需要转换这个显示，但是当我尝试使用Display或Visibility时，它不起作用。我在这里用示例代码创建了一个小提琴： https://jsfiddle.net/eggb4zra/

.vocabTitle
{
text-align:left;
background:linear-gradient(#ffffcc, #ffffcc, white, lightblue);
padding:3px;
padding-bottom;2px;
border:2px solid black;
border-radius:15%;
cursor:pointer;
transition: all 2s;
}
.highlightClass
{
background-color:pink;
}
.hiddenMeaning
{
visibility:hidden;
display:none;
}
.vocabTitle:hover .hiddenMeaning
{
visibility:visible;
display:block;
}

您可以看到显示在悬停时有效，但未转换。任何帮助表示赞赏。

Answer 1

display: none到display: block的转换在CSS中不起作用，因为没有值会删除该元素，就好像它不在页面中一样。

尝试将height *从0转换为20px。将overflow: hidden设置为最初要隐藏的div。

* 由于您需要使用动态高度，因此您可以使用max-height代替height

Updated JSfiddle

.vocabTitle {
  text-align: left;
  background: linear-gradient(#ffffcc, #ffffcc, white, lightblue);
  padding: 3px;
  padding-bottom;
  2px;
  border: 2px solid black;
  border-radius: 15%;
  cursor: pointer;
  transition: all 2s;
}
.highlightClass {
  background-color: pink;
}
.hiddenMeaning {
  transition: all 2s;
  max-height: 0;
  overflow: hidden;
}
.vocabTitle:hover .hiddenMeaning {
  max-height: 100px;
}

<!-- Left bar -->
<div class="kanjiVocab">
  <p>Kanji and Vocabulary listed below:</p>
  <div class='vocabTitle'>風邪 (かぜ ふうじゃ )
    <div class='hiddenMeaning'>common cold cold influenza flu ague</div>
  </div>
  <br>
  <div class='vocabTitle'>気味 (きみ きび )
    <div class='hiddenMeaning'>sensation feeling tendency propensity</div>
  </div>
  <br>
  <div class='vocabTitle'>熱 (ねつ )
    <div class='hiddenMeaning'>heat fever temperature zeal passion enthusiasm mania craze rage</div>
  </div>
  <br>
  <div class='vocabTitle'>季節(きせつ)
    <div class='hiddenMeaning'>Season</div>
  </div>
  <br>
  <div class='vocabTitle'>風邪 (かぜ ふうじゃ )
    <div class='hiddenMeaning'>common cold cold influenza flu ague</div>
  </div>
  <br>
  <div class='vocabTitle'>引き (ひき )
    <div class='hiddenMeaning'>pull patronage influence tug discount</div>
  </div>
  <br>
  <div class='vocabTitle'>で (で )
    <div class='hiddenMeaning'>indicates location of action at in indicates time of action indicates means of action cause of effect by and then so indicates continuing action indicates certainty, emphasis, etc.</div>
  </div>
  <br>
  <div class='vocabTitle'>ん (ん )
    <div class='hiddenMeaning'>yes yeah uh huh negative verb ending used in informal speech (abbr. of negative verb ending "nu") abbr. of particle "no" abbr. of particle "ni" (used especially when it precedes the verb "naru")</div>
  </div>
  <br>
  <div class='vocabTitle'>を (を )
    <div class='hiddenMeaning'>indicates direct object of action indicates subject of causative expression indicates an area traversed indicates time (period) over which action takes place indicates point of departure or separation of action indicates object of desire, like, hate,
      etc.</div>
  </div>
  <br>
</div>
<!-- End of left bar -->

div div中的CSS div无效

1 个答案: