Как выбрать две ссылки одновременно? (т. е. название и изображение) - PullRequest
Новая
       22

Как выбрать две ссылки одновременно? (т. е. название и изображение)

1 голос
/ 05 ноября 2010

Мне интересно, как создать такую ​​галерею миниатюр ...

http://cargocollective.com/saintea

, как при наведении на миниатюру,

даетвыделите эффект для заголовка одновременно, даже если они являются двумя отдельными элементами.

Я мог бы сделать их одним файлом, но причина, по которой я хочу разделить их, заключается в присвоении

различные эффекты :)!

Может кто-нибудь помочь мне?

Большое спасибо за чтение этого поста !!!

хорошего дня!

Ответы [ 4 ]

2 голосов
/ 05 ноября 2010

Это просто два <div> в теге ссылки. Но блочные элементы во встроенных элементах недопустимы, поэтому вы можете лучше использовать <span> элементы в теге ссылки, например так:

HTML: 

<a href="#">
  <span class="one">text</span>
  <span class="two">something else</span>
</a>

a:link span, a:visited span {
  display: block; /* <-- for example */
  color: blue;
}

CSS: 

a:hover span.one {
  color: yellow;
}

a:hover span.two {
  color: orange;
}
1 голос
/ 05 ноября 2010

Вполне приемлемо оборачивать практически любые элементы в один элемент привязки.Большинство браузеров уже поддерживают это, и с HTML5 это на самом деле предпочтительнее.Так что я бы просто сделал: 

<a href="#">
    <img src="image.jpg" width="" height="" alt="" >
    <p>Description of the image</p>
</a>

a:hover img { }
a:hover p { }
1 голос
/ 05 ноября 2010

Как показывают другие ответы, вы можете сделать это как с JavaScript, так и с CSS. Страница использует javascript и фреймворк jQuery , чтобы сделать это.

Я сделал демонстрацию того, как это можно сделать обоими способами: здесь .

С учетом следующего HTML: 

<a href="#" id="theLink">
    <img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
    <span id="theText">Some text</span>
</a>

Вы можете сделать это с помощью jQuery (это примерно так, как это делает эта страница): 

$("#theImage").hover(
    function() {
        $(this).fadeTo("fast", 0.7);
        $("#theText").addClass("hover");
    },
    function() {
        $(this).fadeTo("fast", 1);
        $("#theText").removeClass("hover");
    }
);

где класс hover оформляет текст.

Здесь вы указываете jQuery запускать одну функцию, когда вы наводите на изображение, и другую функцию, когда вы наводите из изображения. $("this).fadeTo устанавливает непрозрачность изображения, в то время как $("#theText").addClass .. ну, это добавляет класс к theText.

(конечно, вам не нужно jQuery, чтобы сделать это, просто очень удобно использовать такую ​​платформу, потому что она отнимает большую часть работы)

<ч /> Или с помощью CSS: 

#imagelink:hover img {
    /* See http://www.quirksmode.org/css/opacity.html for opacity */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);    
    opacity: 0.7;
}
#imagelink:hover span {
    background-color: #66E8FF;
}

Здесь мы говорим браузеру, что при наведении курсора на ссылку с идентификатором imagelink содержимое внутри ссылки типа img должно иметь непрозрачность 70%, тогда как элементы типа span должен иметь другой цвет фона.

0 голосов
/ 05 ноября 2010

Я бы сделал это следующим образом: 

<img src="image.gif" 
  onmouseover="change image style, then change getElementById('comment') style" 
  onmouseout="change all back"/>
<span id="comment">some text</span>
...