Увеличить элемент при наведении, но сохранить исходную область наведения

У меня есть изображение, которое я хочу увеличить, когда я наведу на него, но я не хочу увеличивать площадь, которую принимает наведение. АКА, когда я нависаю над ним. Я не хочу, чтобы сделать это, так что вы должны переместить мышь дальше, чтобы оставить элемент.

У меня нет роскоши изменять html или использовать javascript, поскольку я изменяю css страницы.

Это элементы, с которыми я работаю.

<tbody class="list-item" style="">
    <tr class="list-table-data">
        <td class="data number"/>
        <td class="data image">
            <a class="link sort">
                <!--What I want to enlarge-->
                <img class="hover-info image">
            </a>
        </td>
    </tr>
</tbody>

Я пробовал множество комбинаций:: before и селекторов, чтобы заставить его работать. Часто результат просто оставляет мерцание.

Возможно ли это сделать с чистым css?

3 ответа

  1. Попробуйте увеличить изображение при наведении курсора на якорь и убедитесь, что диаметр якоря остается прежним, а его переполнение видно.

  2. Edit: Извините, я неправильно прочитал ваш пост и пропустил тот факт, что вы можете использовать только CSS для выполнения. Я настроил свое решение на работу в рамках существующего ограничения. Метод похож, родитель aиспользуетz-index, чтобы быть «над»img. Я добавил границуa, чтобы вы могли видеть, что она остается того же размера даже с увеличением ребенкаimg, когда вы наведете курсорa.

    Будет ли это работать для вас?

    a.link > img.hover-info {
      width: 135px;
      height: 155px;
      transition: 500ms;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -999;
    }
    
    a.link {
      display: block;
      width: 135px;
      height: 155px;
      border: 1px solid #000000;
      z-index: 999;
    }
    
    a.link:hover > img.hover-info {
      width: 270px;
      height: 310px;
    }
    <table>
      <tbody class="list-item" style="">
        <tr class="list-table-data">
            <td class="data number"/>
            <td class="data image">
                <a class="link sort">
                    <!--What I want to enlarge-->
                    <img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png" class="hover-info image">
                </a>
            </td>
        </tr>
      </tbody>
    </table>

  3. Возможный путь — это использование position: relative;и z-index: -1;.imageиспользование и сохранение :hoverпсевдокласса .link. Я устроил демонстрацию здесь: http://codepen.io/anon/pen/BLwPEY

    Я позволяю себе некоторые вольности со стилями, но просто в демонстративных целях.

    Я не уверен, что вы хотите, чтобы результат был (например, изображение остается центрированным, или точно, как меняется размер изображения), но это может быть началом. Обратите внимание, что эффект, кажется, Глюк (для меня, по крайней мере) при выключении выше или ниже — если вы мыши быстро, но затем приостановить на краю изображения, состояние наведения, кажется, сохраняется. Не уверен, почему, и я пробовал несколько различных вещей, чтобы устранить его без успеха.

    В любом случае, это может быть началом.