Javascript 在另一个div悬停时更改p标记的颜色_Javascript_Jquery_Html_Css

Javascript 在另一个div悬停时更改p标记的颜色

javascript jquery html css

Javascript 在另一个div悬停时更改p标记的颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在父div中有两个相邻对齐的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"> &l

在父div中有两个相邻对齐的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>

此时，图像将在悬停时更改，但p标记中的文本不会更改。我认为最好的解决方案是使用JS函数来更改img和p标记的颜色。当鼠标悬停在img或p标记上时，将调用此函数。但是，我无法生成这样的函数

有什么想法吗？

您可以将javascript添加到包含它们的div中：

$（“.container行”）.hover（函数（）{
var$this=$（this）；
var$img=$（this.find（“img”）.first（）；
$img.attr（“src”）、$img.data（“悬停”）；
//否则，修改鼠标指针上的相关div
$this.find（“p”）.first（）.css（“颜色”、“红色”）；
}，函数（）{
var$this=$（this）；
var$img=$（this.find（“img”）.first（）；
$img.attr（“src”）、$img.data（“原件”）；
//else修改mouseleave上的相关div
$this.find（“p”）.first（）.css（“颜色”、“黑色”）；
});

此处的文本
此处的文本
此处为文本
您可以在有id=“row1”
等的位置添加class=“row”

JsFiddle：
然后使用以下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:
HTML:

此处的文本
此处的文本
此处的文本

此处的文本
此处的文本
此处的文本

只要从图像中删除mouseover和mouseout事件，并使用这个jquery代码片段，如果您需要更改任何行（即img或p标记）上的内容
<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>


$（文档）.ready（函数（）{
$（'.row'）。在（'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'）；
});
});
只需使用jQuery的函数即可
添加一个类来标识嵌套了两个标记的元素，并将data
属性添加到img

现在使用这段代码，它就可以正常工作了
HTML
工作示例：
我将使用带有mouseenter和mouseleave的类进行设置，并使用数据属性存储悬停值，如下所示：

$（document）.on（'mouseenter mouseleave'，'.lft img，.text'，function（）{
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{
文本对齐：左对齐；
颜色：#838383；
}

此处为文本
此处为文本
此处文本
尝试使用此选项，无需使用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>

尝试使用简单的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>


家
功能更改1（x）{
x、 src=“photo_hover.png”；
var y=document.getElementById（“text1”）；
y、 style.color=“红色”；
}
功能更改2（x）{
x、 src=“photo.png”；
var y=document.getElementById（“text1”）；
y、 style.color=“蓝色”；
}
此处的文本
您也可以在不更改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>


$（文档）.ready（函数（）{
$（“[id^=row]”。鼠标指针（函数（）{
//对于图像悬停
$（'img'，$（this））.attr（'src'，'photo_hover.png'）；
//对于文本悬停
$（'p'，$（this））.css（'color'，'red'）；
}).mouseleave（函数（）{
//对于图像，将鼠标悬停在外
$（'img'，$（this））.attr（'src'，'photo.png'）；
//对于文本，将鼠标悬停在外
$（'p'，$（this））.css（'color'，'black'）；
});
});

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


[id^=“row”]：悬停p{
颜色：红色；
}
必须如何更改？您需要使用Javascript进行更改。搜索hover
事件，然后只需在p
元素上更改style.color
，在img
元素上更改src
。现在完全完成了！哈哈！我也有点难过，我是唯一一个因为使用固定值而被否决的人：'（打字错误..我很丢脸，我的完美消失了。好吧，这在一个完整的解决方案中确实是无用的，但我认为很明显它必须改变，就像带有图像的数据属性一样。对不起，我无法抗拒公平，虽然数据属性的使用对某些人来说是显而易见的，但对某些人来说可能不是他不知道hover（）及其用法。你应该为你的善行和这一行动的良好指导而受到表扬。你说的有道理，是的，他可能不知道。太糟糕了，他可能永远也看不到这一点，因为他已经接受了一个答案
<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>

$( ".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"));
  }
);

 <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>

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

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

<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>

<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>