Question

我在父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>

一些CSS：

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

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

有什么想法吗？

Answer 1

只需使用jQuery＆＃39的函数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 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：通过引用$(this)到$this，我打算在每次需要访问{{1}时阻止运行不必要的jQuery方法来调用$()作为this。这是一种常见做法。

Answer 3

您可以在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 4

我会使用带有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 {
  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 5

尝试使用此不需要使用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 6

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

您也可以在不更改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>

Answer 8

@Html.DropDownList("USER_ID_MANAGER", ViewBag.USER_ID_MANAGER as List<SelectListItem>, "-Select manager-")

只需从图像中删除mouseover和mouseout事件，并使用此jquery代码段，如果您在任何行上更改内容，即在img或p标记上

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

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

8 个答案: