Блог

Главная - Вопросы по программированию - Отключить ссылку с помощью CSS, но включить заголовок

Отключить ссылку с помощью CSS, но включить заголовок

#html #css

#HTML #css

Вопрос:

Я хочу включить ссылку с помощью CSS, но все равно включить заголовок. Вот мой код:

CSS и HTML-код:

 .disabledLink {
   pointer-events: none;
   opacity: 0.6;
   cursor: defau<
 }  
 <a href="www.google.com" class="disableLink" title="My Title" /> 
  <span datahover="test">My Link</span> 
</a>

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

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

1. вам нужен заголовок для этой ссылки

2. чего вы пытаетесь достичь, потому что, если вы просто хотите показать title атрибут текста при наведении курсора, этого должно быть достаточно….

3. Javascript — из комментария в связанной ссылке… «Использование pointer-events: none; не идеально. Это также отключает другие события, такие как наведение курсора мыши, которое требуется для отображения title=»…» или всплывающих подсказок. Я обнаружил, что решение JS лучше (с использованием event.preventDefault() ;»

4. Если требуется только заголовок, используйте тег span и добавьте к нему атрибут title. Остальные проекты могут быть достигнуты с помощью CSS также, как <span class="look-like-link" title="My Title">My Link</span> и .look-like-link{ text-decoration: underline; color: blue}

Ответ №1:

 .disabled-link {
  pointer-events: none;
}  
 <span datahover="test" title="My Title"><a href="www.google.com" class="disabled-link">My Link</a></span>

Измените свою разметку на это. Это будет работать. Вместо таргетинга <a> на тег я ориентируюсь на диапазон для заголовка. Надеюсь, это поможет.

Ответ №2:

Вы должны поместить свой тег span внутри тега ссылки, вот так:

 <a href="www.google.com" class="" title="My Title"> <span datahover="test">My Link</span> </a>

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

1. Как это будет работать … поскольку pointer-events отключены для всей ссылки? И это именно то, что уже делает OP.