Я не могу понять, почему мой переполнение: скрытый не работает правильно. Насколько я понимаю, это отрежет что-либо из заданных размеров, но то, над чем я работаю, должно полностью проявиться при зависании. Итак, у меня есть текст внутри div, который нужно обрезать, пока вы не наведете курсор на него. После того, как вы наведете на него курсор, окно должно развернуться и показать скрытый текст. Ниже приведен код и изображение того, как оно должно выглядеть.

.flexbox {
  width: 600px;
  height: 420px;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.flexbox>div {
  -webkit-transition: 1s ease-out;
  transition: 1s ease-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid black;
  width: 295px;
  margin: -5px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
}

.flexbox>div:nth-child(1) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(2) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(3) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(4) {
  background-color: lightgrey;
}

.flexbox>div:hover {
  width: 300px;
  color: white;
  font-weight: bold;
}

.flexbox>div:nth-child(1):hover {
  background-color: royalblue;
}

.flexbox>div:nth-child(2):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(3):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(4):hover {
  background-color: darkgreen;
}

p {
  height: 100px;
  overflow: hidden;
  font-family: "Rosario"
}

img {
  float: left;
}
<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>

<div class="flexbox">
  <div><img src="http://prism.troy.edu/gpratt68237/images/GPP.png" alt="Good programming practice icon">
    <p>Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/EPT.png" alt="Error prevention tip icon">
    <p>Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/CPE.png" alt="Common programming error icon">
    <p>Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/SEO.png">
    <p>Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.
    </p>
  </div>
</div>

Любая помощь приветствуется.

2
Geoff Pratt 25 Окт 2019 в 07:51

2 ответа

Лучший ответ

Вам нужно дать height: auto для тега <p> при наведении курсора на div.

Поскольку SO не загружает изображения в этом фрагменте, вот вам скрипка

.flexbox {
  width: 600px;
  height: 420px;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.flexbox>div {
  -webkit-transition: 1s ease-out;
  transition: 1s ease-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid black;
  width: 295px;
  margin: -5px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
}

.flexbox>div:nth-child(1) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(2) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(3) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(4) {
  background-color: lightgrey;
}

.flexbox>div:hover {
  width: 300px;
  color: white;
  font-weight: bold;
}

/* Added this rule */
.flexbox > div:hover p {
  height: auto;
}

.flexbox>div:nth-child(1):hover {
  background-color: royalblue;
}

.flexbox>div:nth-child(2):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(3):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(4):hover {
  background-color: darkgreen;
}

p {
  height: 100px;
  overflow: hidden;
  font-family: "Rosario"
}

img {
  float: left;
}
<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>

<div class="flexbox">
  <div><img src="http://prism.troy.edu/gpratt68237/images/GPP.png" alt="Good programming practice icon">
    <p>Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/EPT.png" alt="Error prevention tip icon">
    <p>Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/CPE.png" alt="Common programming error icon">
    <p>Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes.</p>
  </div>
  <div><img src="http://prism.troy.edu/gpratt68237/images/SEO.png">
    <p>Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.
    </p>
  </div>
</div>
0
VilleKoo 25 Окт 2019 в 05:40
p:hover { overflow: visible; }

Вам нужно это в вашем CSS

-1
Hiro Li 25 Окт 2019 в 05:04
58552362