Как я могу сделать так, чтобы img и текстовая ссылка ссылались на одно и то же место и обе становились активными при наведении курсора независимо от того, на какое из них я наводил курсор?
Вопрос
Я хотел бы иметь возможность при наведении курсора на изображение вызывать свойство hover и для текстовой ссылки, которая находится рядом с ним.
У меня есть предварительный просмотр изображения видео и название видео, написанное рядом с ним в виде текстовой строки.Я хотел бы сделать так, чтобы я мог навести курсор на изображение и заставить текст по-прежнему менять цвет, как эффект наведения, без необходимости превращать изображение и текст в одно изображение, для очевидных причин поиска и удобства использования;сохранение текста как текста и т. д.
ОБНОВЛЯТЬ:Я также хочу убедиться, что текстовая ссылка, которая теперь находится в «промежутке», не может просто перемещаться с помощью «поля влево», но может быть поднята вверх.По умолчанию в моем коде он просто опускается до уровня нижней части изображения размером 60x60 пикселей.Я хочу, чтобы оно было выше, чтобы оно выглядело красиво, но «поля-низ» здесь не помогает.я хочу, чтобы это было в «высоте по центру» изображения 60x60...не в самом низу, где он находится по умолчанию.
Есть идеи?Спасибо!
п.с.Я открыт для идей Java-скриптов и jquery, некоторые из которых опубликованы здесь, но я в этом новичок, и мне понадобятся дополнительные объяснения.Я предпочитаю CSS.
мой код сейчас:
мой HTML:
<div id="example">
<a href="#">
<img src="image/source_60x60px.jpg">
<span class="video_text">Image Text</span>
</a>
</div>
мой CSS:
div#example { float:left; width:358px; height:60px; margin-top:20px; }
div#example a { color:#B9B9B9; width:100%;}
div#example a:hover { color:#67a; text-decoration:none;}
span.videotext { margin-left:80px;}
Решение
Вы можете сделать это с помощью CSS или Javascript.Не зная вашей разметки и того, как расположены ваши элементы, невозможно определить, какой вариант лучше.
CSS-опция
a:hover span { color:red; }
<a href="1.html">
<img src="1.jpg" />
<span>Title: One</span>
</a>
В этом примере у нас есть текст и изображение внутри ссылки.Затем мы изменяем цвет текста в событии :hover.
Javascript (jQuery)
div.hovered p { color:red; }
<div class="preview">
<img src="1.jpg" />
<p>Title: One</p>
</div>
$("div.preview img").hover(
function () { $(this).parent().addClass("hovered"); },
function () { $(this).parent().removeClass("hovered"); }
);
В этом примере показано решение, которое просто добавляет класс в родительский контейнер, что, в свою очередь, изменяет представление заголовка.Это событие контролируется путем наведения изображения внутри контейнера.
Обновлять:
Разместить текст не так уж и сложно.Самый быстрый и простой метод — расположить родительский контейнер с относительным положением, а текст — с абсолютным:
<div class="container">
<a href="#">
<img src="1.jpg" />
<span class="title">Hello World</span>
</a>
</div>
div.container { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }
Это быстрый пример.Вы можете изменить значения в соответствии с вашими потребностями.
Другие советы
Как насчет
<style>
a
{
color: #000000;
}
a:hover
{
color: #a9a9a9;
}
</style>
<a href="#"><img src="imagepath" alt="Image Title" /> Image Text</a>
На основе ответа Джонатана, но для JavaScript, если вы не используете jQuery:
<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
<img src="1.jpg" />
<p id="text1">Title: One</p>
</div>
<script type="text/javascript">
function hover(elemID, on){
element = document.getElementById(elemID);
if(on){
element.style.color='red';
}
else
{
element.style.color='black';
}
}
</script>
Мои извинения.Я неправильно прочитал ваш вопрос.Вот еще один удар по этому поводу:
HTML
<div class="video">
<a href="" title="title">
<img alt="title" src="path/to/image" />
Video Title
</a>
</div>
CSS
.video {
line-height: 75px;
margin: 10px;
padding: 10px;
width: 200px;
}
.video img {
float: left;
margin-right: 15px;
}
.video a:hover {
color: #hexcol;
}
.video:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
Очевидно, здесь есть некоторые стили, которые вам не нужны, но я использовал их для тестирования в браузере.Если вы хотите, чтобы ваш текст выравнивался по вертикали с миниатюрой видео, вам необходимо установить для свойства line-height ту же высоту, что и миниатюра изображения.Это переместит текст в середину видео.