Question

我有一个包含h2标签和p标签的div。

我想要一个案例，如果div悬停（moverenter），h2标签和p标签的背景颜色会被交换，当移动时它会重置。

我正在研究这个解决方案，因为我有许多具有不同h2标签和p标签的面板。我的批准到目前为止：

<div class="panel">
  <h2 class="title">This is the title</h2>
  <p class="desc">This is a decription</p>
</div>

在我试过的jQuery上

$(document).ready(function(){
   $(".panel").mouseenter(function(){

    exchange($(this));
}).mouseleave(function(){

    exchange($(this));
});

function exchange(e){
 var x = e.children(".title"),
     y = e.children(".desc");

 x.css("background", "y.css('background')");
}

});

对不起，只是学习JS

注意：由于我还没有开始工作，我也在寻找交换平稳的过渡效果

Answer 1

我没有检查所有内容，但这不起作用：

x.css("background", "y.css('background')");

尝试类似：

var bgY = y.css('background');
x.css("background", bgY);

Answer 2

我对您的代码进行了细微更改

希望它能解决你的问题。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>      
    <script src="Scripts/jquery-ui-1.10.4.js"></script>
    <link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $(".panel").mouseenter(function () {
                $(".panel").toggle();
            }).mouseleave(function () {
                $(".panel").toggle();
            });
        })
    </script>

</head>
<body>
 <div class="panel" style="display:none" >
  <h2 class="title" style="background-color:gray">This is the title</h2>
  <p class="desc"  style="background-color:lightgray">This is a decription</p>
 </div>
 <div class="panel" style="display:block" >
  <h2 class="title" style="background-color:lightgray">This is the title</h2>
  <p class="desc"  style="background-color:gray">This is a decription</p>
 </div>
</body>
</html>

Answer 3

仅用于交换CSS p和h2元素：{/ p>

  $('div.panel').on('hover',function(){
      $(this).find('.title').css('background-color','blue');
      $(this).find('.desc').css('background-color','green');
   },function(){
       $(this).find('.title').css('background-color','green');
       $(this).find('.desc').css('background-color','blue');
   });

现在假设，让我们假设您为background-color和p元素设置了一些h2。

CSS

   .title{
        background-color: green;
     }
    .desc{
        background-color: blue;
     }

SCRIPT

     $('div.panel').on('hover',function(){
      $(this).find('.title').css('background-color','blue');
       $(this).find('.desc').css('background-color','green');
   },function(){
       $(this).find('.title').removeAttr('style');
        $(this).find('.desc').removeAttr('style');
   });

Answer 4

你的意思是

$(".panel").mouseenter(function () {
    var $this = $(this),
        $h2 = $this.children('h2'),
        $p = $this.children('p'),
        h2c = $h2.css('background-color'),
        pc = $p.css('background-color');

    $h2.css('background-color', pc);
    $p.css('background-color', h2c);
}).mouseleave(function () {
    $(this).children('h2, p').css('background-color', '');
})

.panel h2 {
    background-color: lightgrey;
}
.panel p {
    background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
    <h2 class="title">This is the title</h2>
    <p class="desc">This is a decription</p>
</div>
<div class="panel">
    <h2 class="title">This is the title</h2>
    <p class="desc">This is a decription</p>
</div>
<div class="panel">
    <h2 class="title">This is the title</h2>
    <p class="desc">This is a decription</p>
</div>

Answer 5

您可以找到面板的所有子项并更改其背景颜色。

您可以在mouseEnter上执行此操作：

$(".panel").children().css("background-color","red");

并且在mouseLeave上采取另一种背景颜色。

Answer 6

对于动画部分，如果您使用简单的背景颜色，则可以使用animate（）。

...
function exchange(e)
{
  var x = e.children(".title"),
      y = e.children(".desc");
      bg1 = x.css('background-color'),
      bg2 = y.css('background-color');

  x.animate({ "background-color": bg2 }, 1500);
  y.animate({ "background-color": bg1 }, 1500);
}
...

Answer 7

这是一个有效的例子http://jsfiddle.net/9a1qe9q9/2/

的jQuery

$(".panel").mouseenter(function () {

    exchange($(this));

}).mouseleave(function () {

    exchange($(this));
});

function exchange(e) {
    var x = e.children(".title"),
        y = e.children(".desc"),
        xColor = x.css('background'),
        yColor = y.css('background');

    x.css("background", yColor);
    y.css("background", xColor);
}

如何使用jquery获取元素的style属性

7 个答案: