Блог

Главная - Вопросы по программированию - Как я могу создать свой DIV, чтобы он вел себя как адресная ссылка

Как я могу создать свой DIV, чтобы он вел себя как адресная ссылка

#html #css

#HTML #css

Вопрос:

У меня есть квадрат DIV, содержащий слово «Следующий». Я хотел бы, чтобы цвет фона DIV менялся при наведении на него курсора и чтобы он переходил по ссылке, когда я нажимаю на нее. Могу ли я сделать это без использования Javascript? Я не просто хочу использовать ссылку, как я предполагаю, для этого, тогда это сработало бы, только если я перейду выше «next».

Большое вам спасибо за предварительную помощь.

Комментарии:

1. Вы можете выполнить визуальное наведение курсора с помощью div:hover{...} , но для щелчка потребуется JS.

2. «пусть это приведет меня к ссылке, когда я нажимаю на нее» означает, что только нажатие на нее приводит вас к фактической ссылке?

Ответ №1:

Неизбежно мы должны спросить: почему бы не сделать это гиперссылкой? Если он крякает как утка и выглядит как утка, это действительно должна быть утка.

Вы можете обработать эффект зависания с помощью простого :hover правила в вашей таблице стилей (например, div.whatever:hover { color: red; } ), но вы не можете внедрить элемент с функциональностью, такой как переход на новую страницу, без использования JavaScript.

Комментарии:

1. DIV большой, а слово «Следующий» маленькое. Я хотел бы, чтобы пользователь, щелкнув в любом месте DIV, мог перейти по ссылке. Также я хочу изменить цвет DIV. Я не уверен. Могу ли я сделать все это с помощью ссылки? Теперь мой DIV имеет градиент. Могу ли я изменить это также при наведении курсора мыши. Большое вам спасибо.

2. @Beth Вы могли бы установить display: inline-block; на эту ссылку и использовать отступы, чтобы увеличить область, доступную для просмотра. Это одно решение, есть еще много других (все требуют display: inline-block; или display: block; )

3. Как правило, любой вопрос о том, «как я хочу, чтобы это выглядело», может быть решен с помощью таблиц стилей. Использование другого элемента в вашем HTML не решает никаких проблем и часто (как в этом случае) создает новые. Как предлагает @Arjan, вы можете сделать элемент «больше», либо указав width и height , либо указав margin and padding .

4. Привет, я пытался использовать <a> . Это работает нормально, но затем я замечаю, что мой курсор не меняется на указатель, как при наведении на кнопку, когда я внутри <a> . Есть идеи? Публикую этот комментарий в двух местах. Надеюсь, это разрешено.

5. Я подозреваю, что вы использовали margin который добавляет пространство ЗА пределами элемента (т. Е. Между этим элементом и любыми соседними элементами). Используйте padding , когда вы хотите, чтобы пространство было ВНУТРИ элемента.

Ответ №2:

В HTML4 (и, насколько мне известно) HTML5 вы не можете этого сделать. Я слышал, что они планируют сделать это в XHTML2, но это еще не выпущено.

Вы могли бы просто использовать <a> элемент как <div> , просто присвоив ему класс, например NextLink , а затем вы можете что-то сделать в CSS, чтобы он выглядел и действовал как div:

 .NextLink {
    display:block;
}
.NextLink:hover {
    background-color:red;
}

Ответ №3:

Вы можете добиться этого, поместив гиперссылку в DIV с помощью display:block:

 <style>
#next:hover { background-color:red; }
#next a { display:block; }
</style>

<div id="next">
    <a href="#">Next</a>
</div>

Комментарии:

1. Вроде того… но гиперссылка не будет автоматически заполнять всю высоту. Лучше просто оформить <a> по своему желанию и даже не беспокоиться о <div> .

Ответ №4:

Да, вы действительно не можете сделать это без javascript — или, по крайней мере, не стоило бы пытаться, на мой взгляд. Лучшим подходом было бы оформить a тег. Что-то вроде этого:

 a {padding:10px;border:solid 1px #000;}
a:HOVER {background-color:yellow;}