3

Делал по предложенному примеру всплывающую кнопку/ссылку, но есть проблема. При наведении на ul я хочу, чтобы кнопка появлялась всегда в фиксированном месте возле нижней границы ul (как на фото), сейчас же она появляется снизу под изображением, заходя на изображение.

Как нужно

введите сюда описание изображения

Нужна помощь

.mycls ul {
  display: inline-block;
  position: absolute;
}

.show .mycls a {
  display: block;
  float: left;
  text-align: center;
}


/* Обертка */

.mycls li {
  overflow: hidden;
  position: relative;
}

.show {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
}


/* Наведение */

ul:hover .show {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  position: absolute;
}

.mycls {
  width: 220px;
  height: 310px;
  float: left;
  border: 1px solid #808080;
  border-radius: 5px;
  padding: 5px;
  margin: 0px 10px 10px 0px;
  /*margin between item*/
}
<ul class="mycls">

  <li align="center">
    <!--  <div>
            <div>@Html.ActionLink(@Html.DisplayFor(m => item.Name.Tool).ToString(), "Item", new { id = item.ToolID }, new { @class = "div-name" })</div>
                <div class="div-price">Стоимость: @item.Price.ToString("# руб").</div>
                <div>
                    @{
        var img = "";
        try
        {
            var base64 = Convert.ToBase64String(item.ImageData);
            img = string.Format("data:;base64,{0}", base64);
            <img src='@img' class="img-responsive" width="220" height="300" />
        }

        catch (Exception ex)
        {
            <span class="form-control-static">Нет изображения!</span>
        }

                    }
                </div>   -->
    <img src="http://svarkahome.com/wp-content/uploads/2014/05/delaem-svarochnyj-apparat-postojannogo-toka-svoimi_1.jpg" class="img-responsive" width="220" height="200" />
    </div>

    <div class="show">
      <a><input type="button" value="В корзину" class="btn btn-default btn-outline" /></a>
    </div>


  </li>
</ul>

1
  • 2
    .mycls li { height: 100%; }
    – br3t
    25 мар 2017 в 22:10

1 ответ 1

2

Спасибо!

.mycls li {
    overflow: hidden;
    position: relative;
    height: 100%;
}
1
  • Если вы считаете этот ответ правильным, отметьте его как решение
    – Crantisz
    25 мар 2017 в 23:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.