CSS Rectangle Как ссылки

Question

У меня есть 3 прямоугольника, которые я создал с помощью CSS. Я хочу, чтобы они были интерактивными и связывали их с файлом под названием index.html. Я искал через Интернет, но не мог найти способ сделать это. Есть ли способ, в котором наведите указатель мыши на прямоугольник, просто появится файл index.html, но не откроется в совершенно новом окне? Вот фрагмент того, что я до сих пор:

.rec 
{ 
    height: 100px; 
    width: 125px; 
} 
#d1 
{ 
    background : lightgreen; 
    border: 2px solid black; 
    display: inline-block; 
    left: 0%; 
} 
#r1 
{ 
    background : red; 
    border: 2px solid black; 
    display: inline-block; 
    left: 10%; position: relative; 
} 
#r3 
{ 
    background : white; 
    border: 2px solid black; 
    display: inline-block; 
    left: 20%; position: relative; 
} 

Answer 1

щелчков прямоугольники:

<a href="index.html" class="rec" id="r1">Index</a> 
<a href="index.html" class="rec" id="r2">Index</a> 
<a href="index.html" class="rec" id="r3">Index</a> 

Что касается коробочки, которая появляется при наведении их, вы могли бы использовать название = «» в тег привязки, но он имеет стиль по умолчанию, который предоставляет ОС. Чтобы настроить его самостоятельно, вам понадобится JavaScript.

Answer 2

Я нашел интересную ссылку, чтобы узнать о вашей проблеме: css-trick Но первый ответ является хорошим.

Answer 3

Вы должны увидеть учебники JavaScript и jQuery. Это, в основном, делает интерактивные веб-страницы. Хотя здесь, самое лучшее решение, очевидно, использовать

<a href="index.html"> 

было бы хорошо для вас, чтобы узнать их, и их невероятную силу. Проверьте эту скрипку здесь: http://jsfiddle.net/qjntjyyr/

Как вы можете видеть, это довольно просто. В следующей скрипке я использую событие, когда мышь проходит по квадратам. http://jsfiddle.net/qjntjyyr/1/

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