Вопросы Теги

Увеличить высоту при наведении и толкать элементы сверху и снизу

У меня проблемы с объявлением лямбда-выражения, потому что я работаю в Visual FoxPro, у которого есть подстановка Macro и функции ExecScript {} и Evaluate (), которые, похоже, выполняют ту же самую цель. 

? Calculator(10, 23, "a + b")
? Calculator(10, 23, "a - b");

FUNCTION Calculator(a, b, op)
RETURN Evaluate(op)

Одно из преимуществ использования формальных lambdas - это (я предполагаю) проверка времени компиляции: Fox не будет знать, если вы опечатаете текстовую строку выше, пока она не попытается ее запустить.

Это также полезно для управляемого данными кода: вы можете хранить целые процедуры в полях memo в базе данных, а затем просто оценивать их во время выполнения. Это позволяет вам настроить часть приложения без фактического доступа к источнику. (Но это совсем другая тема.)

0
задан ElusiveCoder 17 January 2019 в 14:13
поделиться

2 ответа

Вам нужен менее специфичный селектор, чтобы скрыть все секции, когда внешний контейнер наведен: 

.home-split:hover .item {
  height: 0;
  overflow: hidden;
}
0
ответ дан ecolema 17 January 2019 в 14:13
поделиться

Друг, которого я использую JQuery, чтобы достичь 

$(".item").hover(function() {
        $(this).siblings().css( "height", "1px");
        $(this).css( "height", "98%");
    }, function() {
         $(this).siblings().css( "height", "33%");
          $(this).css( "height", "33%");
    });
body {
	height: 100%;
	overflow: hidden;
}

.home-split {
	height: 100vh;
}

.home-split .item {
	height: 33.333%;
	width: 100%;
	transition: all 1s;
	z-index: 999;
  text-align: center;
  overflow: hidden
}

.h-100 {
  height: 100%;
}

.home-split .item:hover {
	height: 100%;
	transition: all 1s;
	z-index: 9990;
	top: 0 !important;
}

.home-split .item .title {
	align-self: center;
}

.home-split .item a {
	text-decoration: none;
	color: #FFF;
	display: table;
  height: 100%;
  width: 100%;
}

.home-split .item a h2 {
	display: table-cell;
	vertical-align: middle;
}

.home-split .item:nth-child(1) {
	background-color: #000;

}

.home-split .item:nth-child(2) {
	background-color: #d7d7d7;
}

.home-split .item:nth-child(3) {
	background-color: #ebebeb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-split">

      <div class="row no-gutters item">
        <div class="col-12 text-center h-100">
          <a href="#">
            <h2>Item 1</h2>
          </a>
        </div>
      </div>

      <div class="row no-gutters item">

        <div class="col-12 text-center h-100">
          <a href="#">
            <h2>Item 2</h2>
          </a>
        </div>

      </div>

      <div class="row no-gutters item">

        <div class="col-12 h-100">
          <a href="#">
            <h2>Item 3</h2>
          </a>
        </div>

      </div>


    </section>

0
ответ дан qleoz12 17 January 2019 в 14:13
поделиться