Эффект JQuery для изображения и метки при наведении

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

Я показываю изображение более наглядным: когда я нависаю над plane imageметкой или plane img, я хочу, чтобы этот ярлык менял цвет, и я хочу сделать эффект увеличения на Planet. И так же, как и с другими элементами: Earth planet imageс и т. Д. <Div style = " height : 400px ; width : 600px " class = "container" > <div class = "row" > <div class = "col-xs -4 col-xs-offset-2 " > <label class = " col-xs-4 col-xs-offset-2 " ><div style="height:400px; width:600px" class="container"> <div class="row"> <div class="col-xs-4 col-xs-offset-2" style="height:100px"> <img src="~/images/aviation.png" width="80" height="80" class="jumper" /> </div> <div class="col-xs-4 col-xs-offset-2" style="height:100px"> <img src="~/images/international.png" width="80" height="80" class="jumper" /> </div> <div class="row" style="margin-left:1em"> <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Sky</label> <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Planet</label> </div> <div class="col-xs-4 col-xs-offset-2" style="height:100px"> <img src="~/images/longshore3.gif" width="80" height="80" class="jumper" /> </div> <div class="col-xs-4 col-xs-offset-2" style="height:100px"> <img src="~/images/marine.png" width="80" height="80" class="jumper" /> </div> <div class="row" style="margin-left:1em"> <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Warehouse</label> <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Ocean</label> </div> </div> </div> Sky </ label> </ div> <div class = "col-xs-4 col-xs-offset-2" > <img src = "~ / images / aviation.png" width = "80" height = "80 " class = " jumper " /> </ div> <div class = " col-xs-4 col-xs-offset-2 " > <label class = " col-xs-4 col-xs-offset-2 " style = " height : 100px ; " > Planet </ label> </ div> <div class = "col-xs-4 col-xs-offset-2" > <img src = "~ / images / international.png" width = "80" высота = "80" класс = "перемычка" /> </ DIV> <DIV> </ DIV> ur.com/nPZA4.png»отн = "NOFOLLOW"> . контейнер > DIV > DIV : первый - child : hover + div { transform : scale ( 1.5 ); } . container > div > div : nth - child ( 3 ): hover + div { transform : scale ( 1.5 ); } = "https: //i.stack. imgur.com/nPZA4.png "alt =" введите описание изображения здесь ">

Это мой код:

src

Я знаю, что с помощью ids я могу это сделать, но у меня было бы много страниц, чтобы было возможно сделать это без идентификаторов?

javascript,jquery,html,css,twitter-bootstrap,

1

Ответов: 2

1 принят

Это лучшее, что вы можете сделать с помощью CSS, но оно включает переформатирование исходного кода HTML. Вот начало:

HTML:

img[src=""] 
img[alt=""]

CSS:

img

Оттуда вы можете начать с ваших классов CSS и Bootstrap. Теперь я знаю, что это плохое решение, и оно нацелено только на divs, но это больше всего вы можете сделать со смежными селекторами. Я также могу разместить простой JavaScript и / или jQuery решение ...

Теперь вы можете получить элементы по alt и src и altдолжны быть уникальными. srcуже есть:

label
1

Это немного неудобно, но вы можете сделать это, назначив соответствующие идентификаторы элементам imgи labelэлементам.

Например, вызов изображения img1, img2и т.д. , а метки l1или label1, и т.д. Затем , когда изображение зависло над, вызовите функцию , которая захватывает соответствующую метку и меняет свой цвет. Вы можете использовать .slice()для получения соответствующего идентификатора, например:

labelID = "label" + imgID.slice(3);

Это позволит получить номер из идентификатора изображения и придумать правильный идентификатор ярлыка. Затем просто измените цвет для этого идентификатора метки.

JavaScript, JQuery, HTML, CSS, твиттер-самозагрузки,
Похожие вопросы
Яндекс.Метрика