Как выбрать только «родительский» div изображения

Question

Как выбрать только «родительский» div изображения

0

Я пытаюсь сделать цвет фона смены div, когда изображение под div перевернулось, а также когда перевернут сам div.

Пока я могу получить цвета изменения div при опрокидывании, но когда у меня больше 1 изображения на странице, перекатывающейся по изображению, меняется цвет фона всех остальных divs

Возможно, я не буду писать это наиболее понятным способом. Но код и скрипка должны помочь

Html:

<a href="test.html">
      <div style ="width:233px; float:left; position:relative; margin-right:17px; margin-bottom:20px;  ">
        <div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; background-color: #000; opacity:0.8; "  class="cat_top_bar" >image name </div>
          <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="233" height="233" class="img_cat"  >  
      </div>
    </a>

    <a href="test.html">
      <div style ="width:233px; float:left; position:relative; margin-right:17px; margin-bottom:20px;  ">
        <div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; background-color: #000; opacity:0.8; "  class="cat_top_bar" >image name </div>
          <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="233" height="233" class="img_cat"  >  
      </div>
    </a>

Jquery:

$(".cat_top_bar").hover(function () {
                    $(this).animate({
                        backgroundColor: '#f49000',
                        opacity: 0.98
                    }, 100);
                },

                function () {
                    $(this).animate({
                        backgroundColor: '#000',
                        opacity: 0.8
                    },100);
                });

                $(".img_cat").hover(function () {
                    $(".cat_top_bar").animate({
                        backgroundColor: '#f49000',
                        opacity: 0.98
                    }, 100)
                },

                function () {
                    $(".cat_top_bar").animate({
                        backgroundColor: '#000',
                        opacity: 0.8
                    },100);
                });

http://jsfiddle.net/ffB8k/

Я думаю, что это скорее вопрос css, чем что-либо, поскольку я не уверен, как я могу выбрать родительский div. На самом деле это не настоящий родитель.

Sackling 20 сен. 2013, в 17:12

Источник

Теги:

jquery

css

css3

jquery-ui

5 ответов

2

В обработчике события jQuery this является целью события. Оттуда вы можете использовать функции обхода jQuery для поиска связанных элементов:

http://jsfiddle.net/8vGNM/

$(".img_cat").hover(function () {
    $(this).siblings(".cat_top_bar").animate({
        backgroundColor: '#f49000',
        opacity: 0.98
    }, 100)
},

function () {
    $(this).siblings(".cat_top_bar").animate({
        backgroundColor: '#000',
        opacity: 0.8
    }, 100);
});

$(this).prev('.cat_top_bar') также будет работать, как и $(this).parent().find('.cat_top_bar'). Есть много способов пройти DOM, но ключ начинается с this.

Jason P 20 сен. 2013, в 11:36

0

Для выбора parent-div (который на самом деле не является родителем, а является родным братом) вы можете использовать jQuery prev()

Vince 20 сен. 2013, в 13:11

0

Если перемещение курсора из img в .cat_top_bar и наоборот, не нужно запускать фоновое анимацию, вы можете также привязать обработчик hover к родительскому объекту, поэтому вам не придется дублировать код анимации. http://jsfiddle.net/ffB8k/3/

$("a").hover(function () {
    $(this).find('.cat_top_bar').animate({
        backgroundColor: '#f49000',
        opacity: 0.98
    }, 100);
},

function () {
    $(this).find('.cat_top_bar').animate({
        backgroundColor: '#000',
        opacity: 0.8
    },100);
});

pawel 20 сен. 2013, в 12:13

0

$(".cat_top_bar").hover(function () {
                    $(this).animate({
                        backgroundColor: '#f49000',
                        opacity: 0.98,
                    }, 100).css({"z-index":"12"});
                },

                function () {
                    $(this).animate({
                        backgroundColor: '#000',
                        opacity: 0.8
                    },100);
                });

                $(".img_cat").hover(function () {

                    $(this).parent().children().animate({
                        backgroundColor: '#f49000',
                        opacity: 0.98
                    }, 100).css({"z-index":"12"});
                },

                function () {
                    $(".cat_top_bar").animate({
                        backgroundColor: '#000',
                        opacity: 0.8
                    },100);
                });

Используйте z-index и parent() и children()

user2188149 20 сен. 2013, в 11:42

Ещё вопросы

Greenhorn · Accepted Answer · 2013-09-20T12-28-00.000Z

Вы можете сделать это, используя prev():

$(".img_cat").hover(function () {
                    $(this).prev(".cat_top_bar").animate({
                        backgroundColor: '#f49000',
                        opacity: 0.98
                    }, 100)
                },

                function () {
                    $(this).prev(".cat_top_bar").animate({
                        backgroundColor: '#000',
                        opacity: 0.8
                    },100);
                });

Демо- скрипт