Как сделать определенный div видимым при наведении на изображение?

Question

Как сделать определенный div видимым при наведении на изображение?

0

<div class="parent">
   <div class="parent.child">
      <a href="#"></a>
      <div class="parent.chil.child">
          <div class="parent.chil.child.child">
               <img src ="link0" >
               <img src ="link1" >
               <img src ="link2" >
          </div>
      </div>
   </div>
   <h4>
      <a href= "aspPage.aspx">text</a>
   </h4>
   <div class="imgClass0">
       <p>some text</p>
    </div>
   <div class="imgClass1">
       <p>some text</p>
    </div>
   <div class="imgClass2">
       <p>some text</p>
</div>

Эй, ребята !

У меня проблема. У меня есть div, в котором у меня может быть один или несколько узлов <img>, зависит от того, как сервер генерирует DOM (может быть один или много, зависит от числа из базы данных. В <h4> есть несколько элементов <div> <h4>, число из них равно числу элементов <img> сверху.

Мне нужна помощь в создании javascript, который делает "imgClass1" видимым, когда я нахожу <img src="link1" >, а другой imgClassX, X = (1..n) невидим и т.д. Я даю им display:none видимости по умолчанию display:none, но мне нужно imgClass0, чтобы иметь visibility:visible. умолчанию visibility:visible.

С наилучшими пожеланиями, iusmar.

iusmar 04 март 2014, в 03:40

Источник

0

любой код? Вы только вставили HTML, что вы пытались? Несколько предложений: ваши классы div выглядят как идентификаторы, почему бы вам не использовать что-то вроде "<div id = 'imgClass1' class = 'some_class'>", чтобы вы могли скрыть все div с помощью some_class одновременно; "parent.chil.child.child" - ужасный класс, "parent" слишком универсален, используйте что-то более понятное, переосмыслите, как используется каждый div, и вы получите лучшее имя для идентификаторов и классов
arieljuod 04 март 2014, в 02:34
0

Изначально я хотел сопоставить последний символ IMG и DIV, где они были равны, сделать его видимым, а где нет, наоборот. У меня не так много кода, чтобы показать, это глупо, что я написал.
iusmar 04 март 2014, в 06:37
0

У моих классов есть выразительные имена, я просто назвал parent.child и так далее, чтобы помочь вам составить представление о структуре DOM.
iusmar 04 март 2014, в 09:43

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

4 ответа

0

Добавьте класс /id, как показано ниже для изображений

 <img class="img0" src ="link0" >
    <img class="img1" src ="link1" >
    <img class="img2" src ="link2" >

и попробуйте следующий javascript

$("img").hover(function (){     
            var cls=$(this).attr("class");
            $("div[class^='imgClass']").hide();
            var visibleCls=".imgClass"+(parseInt(cls.replace("img","")));
            $(visibleCls).show();
        });

Sarath 04 март 2014, в 02:03

0

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

<img src="link0" class="yourImages" data-image-id="0">
<img src="link1" class="yourImages" data-image-id="1">
<img src="link2" class="yourImages" data-image-id="2">

Вы также можете применить этот идентификатор к div:

<div class="images" data-image-id="0">
    <p>some text</p>
</div>
<div class="images" data-image-id="1">
    <p>some text</p>
</div>
<div class="images" data-image-id="2">
    <p>some text</p>
</div>

Затем вы можете связать парения обработчик к yourImages класса, получить идентификатор из наведен элемента, скрыть все изображения дивы затем показать только требуется один:

$('.yourImages').hover(function() {
    var imageID = $(this).data('image-id');

    $('.images').hide();
    $('.images[data-image-id="' + imageID + '"]').show();
}, function() {
    $('.images').hide();
});

Что вы хотите сделать, когда перестаете парить над любыми изображениями? Мой пример просто скрывает их всех снова.

Robbie Averill 04 март 2014, в 01:03

0

попробуй вот так

$("img[src=link1]").hover(function(){
$("div[class^='imgClass']").hide();
$(".imgClass1").show();
});

играть на скрипке

Anoop Joshi 04 март 2014, в 00:33

Ещё вопросы

любой код? Вы только вставили HTML, что вы пытались? Несколько предложений: ваши классы div выглядят как идентификаторы, почему бы вам не использовать что-то вроде "<div id = 'imgClass1' class = 'some_class'>", чтобы вы могли скрыть все div с помощью some_class одновременно; "parent.chil.child.child" - ужасный класс, "parent" слишком универсален, используйте что-то более понятное, переосмыслите, как используется каждый div, и вы получите лучшее имя для идентификаторов и классов
Изначально я хотел сопоставить последний символ IMG и DIV, где они были равны, сделать его видимым, а где нет, наоборот. У меня не так много кода, чтобы показать, это глупо, что я написал.
У моих классов есть выразительные имена, я просто назвал parent.child и так далее, чтобы помочь вам составить представление о структуре DOM.

Felix · Accepted Answer · 2014-03-04T01-32-00.000Z

Вы можете назначить запуск с помощью селектора вместе с : eq() селектором:

$('img[src^=link]').hover(function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').show();
}, function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').hide();
});

Демо-версия скрипта