Изменить src изображения для посещенной ссылки

#html #css #hyperlink #visited

#HTML #css #гиперссылка #посещенный

Вопрос:

У меня есть список с несколькими записями.

 <ul>    
<li>
    <a href="http://url" title="The Title">
    <img src="/badge-unvisited.png" alt="" border="0" />
    </a>
</li>
<!-- etc. -->
</ul>

Я не хочу использовать jQuery, поэтому он должен быть только для CSS.
Какой самый лучший и простой способ изменить src изображения при его посещении?

Ответ №1:

Какой самый лучший и простой способ изменить src изображения при его посещении?

Его нет. src Свойство изображения выходит за рамки CSS.

Вместо этого вам придется работать со background-image свойствами.

Теоретически у вас может быть два изображения и показывать одно одновременно, а другое при следующем использовании display: none , но это довольно запутанно и приводит к загрузке обоих изображений.

Ответ №2:

По крайней мере, в Webkit и Firefox это невозможно, поскольку стилизация посещенных ссылок допускает различные сценарии атаки.

http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
https://bugzilla.mozilla.org/show_bug.cgi?id=147777
https://bugs .webkit.org/show_bug.cgi?id=24300

Ответ №3:

Afaik, вы не можете изменить src изображения только с помощью css.

Но вы могли бы просто сделать его фоновым изображением того же размера, а затем использовать класс:hover, например

 div {
    background-image:url(default.jpg);
}

div:visited {
    background-image:url(changed.jpg);
}

Кстати, еще более изящным решением было бы использовать одно и то же изображение, включающее оба состояния, и просто изменить background-position . Таким образом, нагрузка меньше. Ищите «css sprites», если вас интересует больше!

1. Проблема в том, что наличие div внутри элемента привязки («a») недопустимо. Я мог бы использовать элемент li и придать ему фон. Но я не могу обернуть ссылку вокруг li. Итак, какой элемент я бы использовал? Промежуток с отображением: блок — единственный вариант, который я вижу.

2. HTML5 позволяет блокировать элементы в <a> . В противном случае промежуток с display:block был бы следующим лучшим решением, да!

Ответ №4:

Вы можете изменить свойства изображения следующим образом:

ul li a:visited img { border:10px }

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

ul li a:after { content:url(image.gif); }

и затем

ul li a:visited:after { content:url(image-2.gif); }

Ответ №5:

css не может изменить dom, я мог бы предложить установить фоновое изображение, а затем скрыть img

 a{background-image:url(badge-visited.png);width:50px;height:50px;}
a:visited img{display:none;}