Изменить цвет тега p на зависании другого div

Question

У меня есть два divs, выровненных рядом с eachother в родительском div. Первый div содержит изображение, второй div содержит текст в теге p. При зависании либо img, либо тега p должно быть затронуто содержимое: img src должен быть изменен И цвет тега p должен быть изменен.

Это выглядит следующим образом:

[DIVLEFT - IMG][DIVRIGHT - text here] 
[DIVLEFT - IMG][DIVRIGHT - text here] 
[DIVLEFT - IMG][DIVRIGHT - text here] 

Это мой HTML:

<div id="row1"> 
    <div class="leftcolumn"> 
     <img src="photo.png" onmouseover="this.src='photo_hover.png';" 
     onmouseout="this.src='photo.png';"> 
    </div> 
    <div class="rightcolumn"><p id="text1">text here</p></div> 
</div> 

<div id="row2"> 
    <div class="leftcolumn"> 
     <img src="photo.png" onmouseover="this.src='photo_hover.png';" 
     onmouseout="this.src='photo.png';"> 
    </div> 
    <div class="rightcolumn"><p id="text2">text here</p></div> 
</div> 

<div id="row3"> 
    <div class="leftcolumn"> 
     <img src="photo.png" onmouseover="this.src='photo_hover.png';" 
     onmouseout="this.src='photo.png';"> 
    </div> 
    <div class="rightcolumn"><p id="text2">text here</p></div> 
</div> 

Некоторые CSS:

.rightcolumn { 
    text-align:left; 
    color:#838383; 
} 

На данный момент, изображение изменяется при наведении курсора мыши, но текст в теге p отсутствует. Я считаю, что лучшим решением является функция JS, которая изменяет img и цвет тега p. Эта функция затем вызывается при наведении курсора на тег img или p. Однако я не могу создать такую ​​функцию.

Любые мысли?

Answer 1

Вы можете добавить class="row", где у вас есть id="row1" и т.д.

JsFiddle: https://jsfiddle.net/ghykdrpx/1/

Затем используйте следующую JQuery:

jQuery(function() { 
    jQuery(".row").hover(function() { 
    jQuery('p', this).addClass("changeColor"); 
    jQuery('img', this).attr("src", "photo_hover.png"); 
    }, function() { 
    jQuery('p', this).removeClass("changeColor"); 
    jQuery('img', this).attr("src", "photo.png"); 
    }); 
}); 

CSS:

.rightcolumn { 
    text-align:left; 
    color:#838383; 
} 

.changeColor { 
    color:red !important; 
} 

HTML:

<div class="row" id="row1"> 
    <div class="leftcolumn"> 
     <img src="photo.png" /> 
    </div> 
    <div class="rightcolumn"><p id="text1">text here</p></div> 
</div> 

<div class="row" id="row2"> 
    <div class="leftcolumn"> 
     <img src="photo.png" /> 
    </div> 
    <div class="rightcolumn"><p id="text2">text here</p></div> 
</div> 

<div class="row" id="row3"> 
    <div class="leftcolumn"> 
     <img src="photo.png"/> 
    </div> 
    <div class="rightcolumn"><p id="text2">text here</p></div> 
</div> 

Answer 2

Вы можете добавить JavaScript для Div-х, которые их содержат:

$(".container-row").hover(function(){ 
 
     var $this = $(this); 
 
     var $img = $(this).find("img").first(); 
 
     $img.attr("src", $img.data("hover")); 
 
     // else to modify the related div on mouseenter 
 
     $this.find("p").first().css("color","red"); 
 
    },function(){ 
 
     var $this = $(this); 
 
     var $img = $(this).find("img").first(); 
 
     $img.attr("src", $img.data("original")); 
 
     // else to modify the related div on mouseleave 
 
     $this.find("p").first().css("color","black"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="row1" class="container-row"> 
 
     <div class="leftcolumn"> 
 
      <img src="http://placehold.it/350x150" data-hover="http://placehold.it/350x150/000000/ffffff" data-original="http://placehold.it/350x150"> 
 
     </div> 
 
     <div class="rightcolumn"><p id="text1">text here</p></div> 
 
    </div> 
 

 
    <div id="row2" class="container-row"> 
 
     <div class="leftcolumn"> 
 
      <img src="http://placehold.it/350x150" data-hover="http://placehold.it/350x150/000000/ffffff" data-original="http://placehold.it/350x150"> 
 
     </div> 
 
     <div class="rightcolumn"><p id="text2">text here</p></div> 
 
    </div>  
 

 
    <div id="row3" class="container-row"> 
 
     <div class="leftcolumn"> 
 
      <img src="http://placehold.it/350x150" data-hover="http://placehold.it/350x150/000000/ffffff" data-original="http://placehold.it/350x150"> 
 
     </div> 
 
     <div class="rightcolumn"><p id="text3">text here</p></div> 
 
    </div>

Примечание: Ссылаясь $(this) на $this, я намеревался предотвратить работу ненужных методов JQuery для вызова $() каждый раз, когда мне нужно получить доступ к this как jQuery Object. Это обычная практика.

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div id="row1" class="row"> 
    <div class="leftcolumn"> 
     <img src="photo.png" > 
    </div> 
    <div class="rightcolumn"><p id="text1">text here</p></div> 
</div> 

<div id="row2" class="row"> 
    <div class="leftcolumn"> 
     <img src="photo.png"> 
    </div> 
    <div class="rightcolumn"><p id="text2">text here</p></div> 
</div> 

<div id="row3" class="row"> 
    <div class="leftcolumn"> 
     <img src="photo.png" > 
    </div> 
    <div class="rightcolumn"><p id="text2">text here</p></div> 
</div> 

Просто удалите MouseOver и MouseOut событие из изображения и использовать этот JQuery фрагмент кода, если вы какие изменения содержимого на любой строке т.е. на любом IMG или р теге

<script> 
     $(document).ready(function() { 
      $('.row').on('mouseover', function() { 
       $(this).find('img').src('photo_hover.png'); 
       $(this).find('p').css('color', '#ff0000'); 
      }); 
      $('.row').on('mouseout', function() { 
       $(this).find('img').src('photo.png'); 
       $(this).find('p').css('color', '#000'); 
      }); 
     }); 
    </script> 

Answer 4

Просто используйте JQuery-х функция hover().

Добавить класс, чтобы идентифицировать ваш элемент, который содержит два тега, и добавить data атрибуты к вашему img.

Теперь используйте этот кусок кода, и он отлично работает.

HTML

<img src="http://placehold.it/350x150" data-src="http://placehold.it/350x150/" data-src-hover="http://placehold.it/350x150/E8117F/ffffff"> 
<p data-color="black" data-color-hover="magenta">text here</p> 

JS

$(".hover-element").hover(
    function() { 
    var jThis = $(this); 
    var image = jThis.find("img"); 
    var p = jThis.find("p"); 
    image.attr("src", image.data("hover-src")); 
    p.css("color",p.data("hover-color")); 
    }, function() { 
    var jThis = $(this); 
    var image = jThis.find("img"); 
    var p = jThis.find("p"); 
    image.attr("src",image.data("src")); 
    p.css("color",p.data("color")); 
    } 
); 

Рабочий пример: JSFiddle

Answer 5

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

$(document).on('mouseenter mouseleave','.lft-img, .text', function(){ 
 
\t \t var $this=$(this); 
 
    var $row=$this.closest('.row'); 
 
    var $text=$row.find('.text'); 
 
    var $img=$row.find('.lft-img'); 
 
    
 
    var color=$text.css('backgroundColor'); 
 
    var otherColor=$text.data('other-color'); 
 
    
 
    var otherImg=$img.data('other-img'); 
 
    var img=$img.attr('src'); 
 
    
 
    $text.data('other-color',color).css('backgroundColor',otherColor) 
 
    $img.data('other-img',img).attr('src',otherImg); 
 
    
 
    
 
});

.rightcolumn { 
 
    text-align: left; 
 
    color: #838383; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="leftcolumn"> 
 
    <img class="lft-img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-other-img="https://placeholdit.imgix.net/~text?txtsize=33&txt=Other image&w=350&h=150"> 
 
    </div> 
 
    <div class="rightcolumn"> 
 
    <p class="text" data-other-color="red">text here</p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="leftcolumn"> 
 
    <img class="lft-img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-other-img="https://placeholdit.imgix.net/~text?txtsize=33&txt=Other image&w=350&h=150"> 
 
    </div> 
 
    <div class="rightcolumn"> 
 
    <p class="text" data-other-color="blue">text here</p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="leftcolumn"> 
 
    <img class="lft-img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-other-img="https://placeholdit.imgix.net/~text?txtsize=33&txt=Other image&w=350&h=150"> 
 
    </div> 
 
    <div class="rightcolumn"> 
 
    <p class="text" data-other-color="#cccccc">text here</p> 
 
    </div> 
 
</div>

Answer 6

попробуйте использовать это не нужно использовать JavaScript или JQuery

<div id="row1"> 
<div class="leftcolumn"> 
    <img src="photo.png" onmouseover="this.src='photo_hover.png';" 
    onmouseout="this.src='photo.png';"> 
</div> 
<div class="rightcolumn"><p id="text1" onmouseover="this.innerHTML='hello';" onmouseout="this.innerHTML='bye bye';">text here</p></div> 
</div> 

<div id="row2"> 
<div class="leftcolumn"> 
    <img src="photo.png" onmouseover="this.src='photo_hover.png'; " 
    onmouseout="this.src='photo.png';"> 
</div> 
<div class="rightcolumn"><p id="text2" onmouseover="this.innerHTML='hello';" onmouseout="this.innerHTML='bye bye';">text here</p></div> 

CSS

.rightcolumn { 
    text-align:left; 
    color:#838383; 
} 

#text1:hover,#text2:hover{ 
    color:red; 
} 

Answer 7

Попробуйте это с помощью простой JavaScript

<html> 
<head> 
<title>Home</title> 
</head> 
<script> 
function change1(x) { 
    x.src = "photo_hover.png"; 
    var y=document.getElementById("text1"); 
    y.style.color="red"; 
} 

function change2(x) { 
     x.src = "photo.png"; 
    var y=document.getElementById("text1"); 
    y.style.color="blue"; 
} 
</script> 
<body> 

<div id="row1"> 
    <div class="leftcolumn"> 
     <img src="photo.png" onmouseover="change1(this)" 
     onmouseout="change2(this)"> 
    </div> 
    <div class="rightcolumn"><p id="text1">text here</p></div> 
</div> 

</body> 

Answer 8

Вы также можете попробовать это, не изменяя свой html.

<script> 
     $(document).ready(function() { 
      $("[id^=row]").mouseenter(function() { 
       // for the image hover 
       $('img', $(this)).attr('src', 'photo_hover.png'); 
       // for the text hover 
        $('p', $(this)).css('color', 'red'); 

      }).mouseleave(function() { 
       // for the image hover out 
       $('img', $(this)).attr('src','photo.png'); 
       // for the text hover out 
       $('p', $(this)).css('color', 'black'); 
      }); 
     }); 
    </script> 

Или вместо

<style> 
    [id^="row"]:hover p { 
     color: red; 
    } 
</style>