Можно ли иметь гиперссылку внутри {content:}?

МЕТА: Этот документ был помечен как дубликат, и вместо него мне предложили создать другой пост, что я и сделал здесь: Как получить гиперссылки внутри всплывающего окна. отображать ссылку на термин при наведении указателя мыши и отделять термин HTML от содержимого всплывающей ссылки. Затем я также понял, что лучше сформулировать цель приложения.

В качестве размышления: я думаю, что может быть сложно, особенно для неопытных пользователей, выбрать хороший компромисс между специфичностью, с одной стороны, и целеустремленностью, с другой. Мои извинения за любые проблемы. Большое спасибо за помощь.

---

Можно ли иметь гиперссылку внутри синтаксиса CSS {content:"..."}? Как можно создать такую ​​ссылку?

В качестве примера, вот фрагмент кода, который я создал, чтобы иметь описание термина при наведении мыши:

HTML

<br><term id="HPV">HPV</term>

CSS

term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted}

term:hover{text-decoration:none; color:#aaaaaa}

term#HPV:hover:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black}

term#HPV:hover:after{content:"Human papillomavirus."}

Меня интересует, как получить "вирус папилломы человека". с гиперссылкой?


html css hyperlink
person O0123    schedule 22.01.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Нет решения для этого с помощью css. что-либо внутри содержимого не будет HTML-разметкой, это будет только текст. поэтому вы, вероятно, могли бы добавить элемент html при наведении, который ссылается на другой URL-адрес. например, http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<a href="google.com">click me</a>');;
    },function(){

    });
});
person Naeem Shaikh    schedule 22.01.2015
comment
Вы имеете в виду, с javascript, как в упомянутом выше сообщении? --- Я начинаю думать, что мой вопрос дублируется... - person O0123; 22.01.2015
comment
нет, не дубликат, но очень похоже - person Naeem Shaikh; 22.01.2015
comment
Привет, @Naeem, спасибо за помощь. Получаете ли вы какой-либо результат на своем JSFiddle? - person O0123; 22.01.2015
comment
@VincentVerheyen .. извините, CSS отсутствует. отредактировано сейчас - person Naeem Shaikh; 22.01.2015
comment
Я очень ценю вашу помощь. Ваш MWE работает отлично. Однако я не могу заставить это работать с моим исходным примером вопроса. --- Кроме того, этот пост, кажется, помечен как дубликат. Можете ли вы проверить это или объяснить, почему это, возможно, не так, поскольку вы гораздо более опытный пользователь, чем я? Мне очень трудно разобраться. --- Если это дубликат, я удалю пост. --- Еще раз спасибо. - person O0123; 22.01.2015
comment
Новый вопрос здесь: stackoverflow.com/questions/28089638/. - person O0123; 22.01.2015

arrow_upward
2
arrow_downward

«Контент, добавленный с помощью псевдоэлемента, не отображается в DOM, поэтому нет, вы не можете. Но почему вы хотите сделать это с помощью CSS? Это не стиль, кажется, правильное место находится прямо в файле HTML. ." Скопировано из здесь

person Isak    schedule 22.01.2015
comment
Я не могу найти способ сделать это. Так как текст, на который нужно получить гиперссылку, в чистом HTML не виден. Причина этого в том, что этот текст определяется в CSS синтаксисом ...:after. - person O0123; 22.01.2015
comment
Я не могу понять, что вы ищете? Почему простой <a href="mailto:[email protected]">Send me a mail!</a> не работает? См. w3schools.com/tags/tag_address.asp. - person Isak; 22.01.2015
comment
@Isak .. это не элемент .. это установка элемента внутри другого с использованием свойства css content - person Naeem Shaikh; 22.01.2015