При наведении на одну ссылку подсветить две

galaydas · March 21, 2013

Всем привет, такая проблема


<div class="block">
<div class="block2">
<a href="#"><img src="img.jpg" /></a>
</div>
<a href="#"><h3>Заголовок</h3></a>
</div>

Как можно сделать, что бы при наведении на картинку подсвечивалась ссылка с текстом, засунуть весь блок в <a> не вариант, может быть есть на js решение?

Помогите, кто чем может

SergeyZelensky · March 21, 2013

Всем привет, такая проблема
<div class="block">
<div class="block2">
<a href="#"><img src="img.jpg" /></a>
</div>
<a href="#"><h3>Заголовок</h3></a>
</div>
Как можно сделать, что бы при наведении на картинку подсвечивалась ссылка с текстом, засунуть весь блок в <a> не вариант, может быть есть на js решение?
Помогите, кто чем может

сделай на картинке событие onmouseover и сделай функцию которая по id или class находит ссылочку которую нужно подсветить и сделай для неё через js манипуляции

сейчас времени привести пример кода нету, могу помочь вечером если что стучись 6c5f81bbed217b9eb5b7@qip.ru

sitemaker999 · March 21, 2013

Есть на JS. Сразу присвоим ID тегу. Затем сделаем CSS.


#наш_ид:hover {............}
#наш_ид[highlight='ok'] {...........}

Далее пишем Javascript.


function highlightLinkById(id) {
document.getElementById(id).highlight = (document.getElementById(id).highlight == 'ok') ? 'ok' : 'none'
}

Затем картинке присваиваем onmouseover и onmouseout:


onmouseover="highlightLinkById('наш_ид')" onmouseout="highlightLinkById('наш_ид')"

http://jsfiddle.net/zCqPh/

Чё-то не работает

Edited March 22, 2013 by sitemaker999

Libiros · March 21, 2013

Всем привет, такая проблема
<div class="block">
<div class="block2">
<a href="#"><img src="img.jpg" /></a>
</div>
<a href="#"><h3>Заголовок</h3></a>
</div>
Как можно сделать, что бы при наведении на картинку подсвечивалась ссылка с текстом, засунуть весь блок в <a> не вариант, может быть есть на js решение?
Помогите, кто чем может

index.html


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="block">
<div class="block2">
<a href="#"><img src="img.jpg" /></a>
<a href="#" id="link">Ссылка с текстом</a>
</div>
<a href="#"><h3>Заголовок</h3></a>
</div>
</body>
</html>

css/style.css


#link{
display:none;
position:absolute;
background:#aaa;
font:normal 10px verdana;
opacity:0.8;
top:80px;
width:100px;
height:30px;
}
.block2:hover #link{
display:block;
}

Так?

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

Edited March 21, 2013 by Libiros

galaydas · March 21, 2013

Да, так, если на блок наводим, то срабатывает, но нужно именно на картинку, у меня пока не выходит

Frz · March 21, 2013

Добавь класс ссылке и к ней будет добавляться новый класс со стилями наведенной ссылки при наведении курсора на изображение и убираться когда курсор будет уходить с изображения

Может быть можно как-то оптимальнее сделать, я сам только начинаю изучать jquery

http://jsfiddle.net/Xm2Be/357/

lolka84 · March 21, 2013

http://jsfiddle.net/HwA8s/

Libiros · March 21, 2013

Да, так, если на блок наводим, то срабатывает, но нужно именно на картинку, у меня пока не выходит

Далее всё зависит от требований. Если в .block2 будет несколько div'ов, в которых есть картинка и ссылка с текстом, то можно сделать так:


<div class="block2">
<div id="test">
<a href="#"><img src="img.jpg"/></a>
<a href="#" id="link">Ссылка с текстом</a>
</div>
<div id="test">
<a href="#"><img src="img.jpg"/></a>
<a href="#" id="link">Ссылка с текстом</a>
</div>
<div id="test">
<a href="#"><img src="img.jpg"/></a>
<a href="#" id="link">Ссылка с текстом</a>
</div>
</div>


#link{
display:none;
position:absolute;
background:#aaa;
font:normal 10px verdana;
opacity:0.8;
margin:-30px auto;
width:100px;
height:30px;
border:1px solid green;
}

.block2{
width:400px;
height:200px;
border:1px solid black;
}
#test{
display:inline-block;
width:100px;
margin:10px;
border:1px solid black;
}
#test:hover #link{
display:block;
}

Если критично количество div'ов, то можно переделать.

Также можно избежать изобилие div'ов (заменив их на p или списки) и изобилие id, вписав простые :first-child и :last-child. Но это, опять же, зависит от конечных требований. Вдруг, там будет тысяча ссылок и тогда :last-child не подойдет и т. п.

Edited March 21, 2013 by Libiros

galaydas · March 21, 2013

http://jsfiddle.net/HwA8s/

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

galaydas · March 21, 2013

Libiros:

Все это хорошо но вы видите, что картинка и текст в ссылке у меня в разных блоках


<div class="block">
<div class="block2">
<a href="#"><img src="img.jpg" /></a>
</div>
<a href="#"><h3>Заголовок</h3></a>
</div>

При наведении на картинку меняет цвет ссылка, картинки могут быть разного размера, у одной высота например может быть 200рх а у другой 30рх. вот почему нужно наведение не на блок а на картинку, будет много div=block, но в каждом только одна картинка и одна ссылка, вся загвоздка и есть в том, что картинка и текст в разных блоках

Libiros · March 21, 2013

При наведении на картинку меняет цвет ссылка

Та, что

<a href="#"><h3>Заголовок</h3></a>

?

lolka84 · March 21, 2013

http://jsfiddle.net/HwA8s/
Да, это то, что нужно, только как я понимаю, это для единичного случая, а если таких блоков много на странице, то работать будет только первый, наверное для каждого в отдельности сделать нельзя

Что мешает сделать так: http://jsfiddle.net/HwA8s/2/ ?

galaydas · March 21, 2013

При наведении на картинку меняет цвет ссылка
Та, что
<a href="#"><h3>Заголовок</h3></a>
?

Да )

http://jsfiddle.net/HwA8s/
Да, это то, что нужно, только как я понимаю, это для единичного случая, а если таких блоков много на странице, то работать будет только первый, наверное для каждого в отдельности сделать нельзя
Что мешает сделать так: http://jsfiddle.net/HwA8s/2/ ?

Картинки и ссылка в разных блоках, так надо

SelenIT · March 21, 2013

А всё-таки, кто/что запрещает обернуть оба внутренних блока одной ссылкой?

galaydas · March 21, 2013

А всё-таки, кто/что запрещает обернуть оба внутренних блока одной ссылкой?

Если что, так сделаю, но не желательно, это на крайний случай

Libiros · March 21, 2013

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


<div class="block">
  <div class="block2">
   <a href="#"><img src="img.jpg" onmouseover="document.getElementById('test').style.color='#f00';" onmouseout="document.getElementById('test').style.color='';"/></a>
  </div>
  <a href="#" id="test"><h3>Заголовок</h3></a>
</div>

Если будет много картинок и ссылок, то каждый раз придётся менять id. Можно как-то это автоматизировать, но здесь мои знания js заканчиваются

galaydas · March 21, 2013

Есть на JS. Сразу присвоим ID тегу. Затем сделаем CSS.
#наш_ид:hover {............}
#наш_ид[highlight='ok'] {...........}
Далее пишем Javascript.
function highlightLinkById(id) {
document.getElementById(id).highlight = (document.getElementById(id).highlight == 'ok') ? 'ok' : 'none'
}
Затем картинке присваиваем onmouseover и onmouseout:
onmouseover="highlightLinkById('наш_ид')" onmouseout="highlightLinkById('наш_ид')"

И что, в вашем случае, при наличии многих повторяющихся блоков, будет правильно работать?

Libiros · March 21, 2013

Всё будет правильно работать. Плохо то, что каждая новая картинка будет иметь id с названием id1, id2, id3, ..., idn.

Switch74 · March 22, 2013

если размер block2 соответствует размеру картинки, то можно так http://jsfiddle.net/eTQdd/

с помощью js универсальный вариант для большого количества таких конструкций http://jsfiddle.net/eTQdd/1/

galaydas · March 22, 2013

если размер block2 соответствует размеру картинки, то можно так http://jsfiddle.net/eTQdd/
с помощью js универсальный вариант для большого количества таких конструкций http://jsfiddle.net/eTQdd/1/

ВОТ !!! Оно Switch7, то что нужно, взял второй вариант с JS. Стало как надо прямо )))

Спасибище вам Switch7 огромное !!!

Спасибо всем добрым людям кто советовал!

Решение найдено ))

sitemaker999 · April 16, 2013

если надо селектор по родителю (css) то вот:


*:has(селектор)

а если родитель должен быть определенным то заменить звездочку (*) на селектор родителя

Sign In

При наведении на одну ссылку подсветить две

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information