Question

强文这是我的HTML代码

"./something" == 1

这是我的样式表

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="hov.css">
    </head>
    <body>
        <div id="one">
            <p>mango</p>
        </div>
        <div id="two">
            <p>apple</p>
        </div>
    </body>
</html>

当鼠标悬停在芒果上时，我想用绿色（bg颜色）而不是芒果以红色（bg颜色）显示苹果，我试过了以下代码，但这对我没有帮助..

#two
{
    display:none;
}
#one
{
   background-color :red;
}

Answer 1

您可以将apple的css应用于mango的悬停，如下所示

$('#mango').hover(function(){
  $('#apple').css('background-color','greenyellow').show();
  $(this).hide();
});
$('#apple').mouseout(function(){
  $('#mango').show();
  $(this).hide();
});

#two
{
    display:none;
}
#one,#mango
{
   background-color :red;
}
#one:hover+#two{
    display:block;    
    background-color: greenyellow;
}
#apple{
  display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
  <p>mango</p>
</div>
<div id="two">
  <p>apple</p>
</div>
<br>
<h3>With jQuery</h3>
 <p id="mango">mango</p>
 <p id="apple">apple</p>

jQuery版本将隐藏mango＆amp;在apple悬停时显示mango，当鼠标指针远离苹果时，它会反向显示。

Answer 2

这是你想要的：

＆＃13;

function green() {
  document.getElementById("one").style.backgroundColor = "green";
  document.getElementById("text").innerHTML = "apple";
}

function red() {
  document.getElementById("one").style.backgroundColor = "red";
  document.getElementById("text").innerHTML = "mango";
}

＆＃13;

#one {
  background-color: red;
}

＆＃13;

<div id="one" onmouseover="green()" onmouseout="red()">
  <p id="text">mango</p>
</div>

＆＃13;

直播Demo

Answer 3

这是一个仅限CSS的解决方案。诀窍是将第二个元素叠加在第一个元素的顶部，然后隐藏它。在悬停时，显示第二个div。注意：我没有使用visibility，因为人们无法悬停在不可见的元素上。

以下是片段：

＆＃13;

#one {
  display:block;
  background-color: red;
}

#two {
  opacity: 0;
  background-color: green;
  position: relative;
  top: -34px;
}

#two:hover {
    opacity: 1;
  }
}

＆＃13;

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="hov.css">
    </head>
    <body>
        <div id="one">
            <p>mango</p>
        </div>
        <div id="two">
            <p>apple</p>
        </div>
    </body>
</html>

＆＃13;

Answer 4

#one {
  display:block;
  background-color: red;
}

#two {
  display:none;
  background-color: green;
}

#one:hover+#two {
    display: block;
  }

<强> Codepen https://codepen.io/anon/pen/QEzQKm

Answer 5

我想不出只针对你的问题的CSS解决方案。这是一种JavaScript方式。

function toggle(_this, txt) {
  //Change the text
  _this.innerHTML = txt;

  //Change the color
  _this.classList.toggle("green");
  _this.classList.toggle("red");
}

.red {
  background-color: red;
}
.green {
  background-color: greenyellow;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="hov.css">
</head>

<body>
  <div id="one" class="red" onmouseover="toggle(this,'apple')" onmouseout="toggle(this,'mango' )">
    mango
  </div>
</body>

</html>

当鼠标悬停在芒果上时，我想用绿色显示苹果而不是红色芒果

5 个答案: