Ссылка под изображением не кликабельна

0

Скрипт: http://jsfiddle.net/FtQ4d/1/

Я делаю проект для класса, и я создал веб-страницу, где есть название в центре и два изображения левой и правой руки внизу. При зависании над одной из рук он будет отодвигаться от экрана, показывая ссылку внизу. У меня есть ссылка, скрытая под руками, но когда рука движется, ссылка не доступна. Как я могу это сделать?

Вот соответствующие части html и css:

<body>
    <a href="https://www.google.com"><p id="rsm">(view my resume.)</p></a>
    <div id="ind_wrap">
        <p id="ind">INDEX.HTML</p>
        <img src="r_hand.png" id="r_hand"/>
        <img src="l_hand.png" id="l_hand"/>
    </div>
</body>

CSS:

#r_hand{
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover{
animation:m_right 4s 1;
}
#l_hand{
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}

#l_hand:hover{
animation:m_left 3s 1;
}
#rsm{
margin-top:40%;
margin-left:20%;
position:absolute;
z-index:-1;
}

Таким образом, #rsm - это ссылка внизу, которая открывается, когда левая рука выходит из нее, но она не доступна. Как я могу это исправить?

  • 2
    Можете ли вы сделать aJSFiddle, чтобы показать нам, что на самом деле происходит? Я предполагаю, что div расположен над ссылкой, и поскольку div на самом деле не перемещается (это будет отображаться), тогда ссылка не будет кликабельной через div.
  • 0
    Скрипка создана. Как видите, ссылка не кликабельна.
Показать ещё 2 комментария
Теги:
hyperlink
click
animation

2 ответа

0
Лучший ответ

Проблема заключается в значении z-index на #rsm. При наведении изменить его на более позитивное, чтобы оно было вынесено выше всех остальных

Поделиться
  • 0
    Это не сработало, когда я изменил z-index на #rsm: hover, но это стало активным, когда я изменил z-index только на #rsm. Есть ли способ заставить его работать так, как я хочу? Изменить: я попытался изменить z-index в анимации #l_hand: hover на отрицательный 9, но это все равно не делает ссылку кликабельной.
  • 0
    Если вы поместите ссылку ПОСЛЕ изображений в div в исходном коде HTML, вы можете указать для нее состояние наведения.
Показать ещё 4 комментария
0

Как упоминал Арун в своем ответе, z-index отвечает за это, однако простой наведение не работает (я полагаю, вы не хотите использовать js).

Вы используете Firefox или Chrome? Это может быть как-то связано с вашей проблемой.

Также, если вы центрируете элементы, используйте margin: 0 auto; вместо того, чтобы вручную перебирать проценты в соответствии с размером экрана. Я бы также рекомендовал использовать только проценты для ширины не высоту, так как это может привести к неожиданным результатам при разных размерах экрана.

Редактировать:

Я не понял, что код в скрипке отличается от того, который вы опубликовали. Я также обновил свой ответ.

Поделиться
  • 0
    Я немного изменил код в скрипке, чтобы ссылка была на самом деле под рукой. И я должен был поместить изображения на imgur, чтобы img src был оттуда. Кроме того, поле margin: 0 auto помещает текст в левую часть экрана. возможно я делаю это неправильно.
  • 0
    Я обновил свой ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню