Question

这是我的要求：

我有＆＃34; Ttile＆＃34; 和＆＃34;说明＆＃34; 。

在页面加载，＆＃34; outerElementsContainer＆＃34;（DIV ID）div背景应该是白色
＆＃34;名称＆＃34; ＆安培; ＆＃34;边界＆＃34;颜色应为绿色，＆＃34;描述颜色应该是黑色。
鼠标悬停＆＃34; outerElementsContainer＆＃34;（DIV ID）div，DIV 背景应更改为绿色
＆＃34;名称＆＃34;颜色应更改为白色，＆＃34;说明＆＃34;颜色应该改为WHITE。
鼠标退出＆＃34; outerElementsContainer＆＃34;（DIV ID）div，DIV背景应该改为WHITE
＆＃34;名称＆＃34; ＆安培; ＆＃34;边界＆＃34;颜色应更改为绿色，＆＃34;说明＆＃34;颜色应该改为BLACK。

我被困在＆＃34;描述＆＃34;颜色。它不会改变鼠标悬停。

以下是我的HTML代码：

 <div id="outerElementsContainer">
 <div id="123456" name="123456"    onMouseOut="this.style.background='WHITE';this.style.color='GREEN';"
onmouseover="this.style.background='GREEN';this.style.color='WHITE';"
style="float:left; margin-right:2em;cursor: pointer;   color:'GREEN';width:18em;height:12em; 
  border-color:'GREEN'; border-width:1px;margin-top: 1em;      border-style:solid;">

                     <div id="InnerDiv1" 
                     style="background-color:'GREEN';height:0.5em;margin-bottom: 10px;">
                     </div>

                     <div id="InnerDiv2"
                     style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;">
                         <p id="title">Title</p>
                     </div>

                     <div id="InnerDiv3" 

                     style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
                         <p id="Description">Description</p>
                     </div>
                 </div>  

             </div>

如何解决这个问题？

Answer 1

使用css：

#description:hover{
 background-color: green;
color: black;
}

当鼠标悬停在id 123456的div上时，这会将背景颜色变为绿色，当鼠标不在div上时，背景将返回白色。< / p>

请参阅 - http://www.w3schools.com/cssref/sel_hover.asp

要使用CSS，要么制作一个.css文件并将其包含在html页面的<head>部分中，就像这样 - <link rel="stylesheet" type="text/css" href="myCSSFile.css">＆lt; - 更好的做法，请参阅 - http://www.w3schools.com/css/css_howto.asp

如果您愿意，还可以在html文件中包含CSS样式，如<head>部分所示 -

<style>
    #description:hover{
     background-color: green;
     color:black;
    }
</style>

这与为CSS本身制作文件一样好。

Answer 2

您还可以删除css属性{{#each advisers}} {{firstName}} {{#each monthData}} {{this}} {{/each}} {{/each}}：

color:black

到

<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description">Description</p>
</div>

Answer 3

您只能使用css执行此操作：

body{color:black;}

#outerElementsContainer > div {
  float: left;
  margin-right: 2em;
  cursor: pointer;
  color: 'GREEN';
  width: 18em;
  height: 12em;
  border: solid 1px green;
}
#InnerDiv2 {
  height: 3.5em;
  overflow: hidden;
  margin-left: 0.5em;
  font-size: larger;
  font-weight: bold;
}
#InnerDiv2 p{color:green;}
#InnerDiv3{
height: 5em;overflow: hidden;margin: 0.5em;
}

#outerElementsContainer:hover > div {
  background:green;
  border:green 1px green;
  color:white;
  }

#outerElementsContainer:hover p{
color:white;
}

<div id="outerElementsContainer">
  <div id="123456" name="123456">

    <div id="InnerDiv1">
    </div>

    <div id="InnerDiv2">
      <p id="title">Title</p>
    </div>

    <div id="InnerDiv3">
      <p id="Description">Description</p>
    </div>
  </div>

</div>

Answer 4

参见InnerDiv3 div中的描述你应用了inine css颜色：黑色和内联css具有更多的优先级，这就是为什么颜色不会改变。

我已根据您的要求使用jquery为您编写了一个简化的解决方案

$(document).ready(function(e) {
  $("#123456").mouseover(function(e) {
    $(".greenColor").css("background-color", "green");
    $(".blackColor").css("color", "black");
    $(".whiteColor").css("color", "white");
  });
  $("#123456").mouseleave(function(e) {
    $(".greenColor").css("background-color", "white");
    $(".blackColor").css("color", "green");
    $(".whiteColor").css("color", "black");
  });
});

.greenColor {} .blackColor {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerElementsContainer">
  <div id="123456" name="123456" class="greenColor" style="float:left; margin-right:2em;cursor: pointer;   color:'GREEN';width:18em;height:12em; 
  border-color:GREEN; border-width:1px;margin-top: 1em;border-style:solid;">

    <div id="InnerDiv1" style="height:0.5em;margin-bottom: 10px;">
    </div>

    <div id="InnerDiv2" style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;color:Green" class="blackColor">
      <p id="title">Title</p>
    </div>

    <div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
      <p id="Description" class="whiteColor">Description</p>
    </div>
  </div>

</div>

希望这对你有所帮助

Answer 5

试试这个。我想这就是你想要的。如果不是这样的话告诉我。我为你写了一个完整的代码。只需复制，粘贴并试一试。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">

div.outerelement{
  width:500px;
  height: 500px;
  background-color: white;
  border:1px solid green;
  text-align: center;
}


h1.ttl{
  color: green;
}

h1.des{
  color: black;
}

.classOne{
  background-color: green;
}
.classTwo{
  color:white;
}

</style>
<body>

<div class="outerelement">
  <h1 class="ttl">Title</h1>
  <br/><br/><br/>
  <h1 class="des">Description</h1>
</div>
  
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $(".outerelement").mouseenter(function(){
      $(this).css({"background-color":"green"},1000);
      $(".ttl").css({"color":"white"},1000);
      $(".des").css({"color":"white"},1000);
    });

     $(".outerelement").mouseleave(function(){
      $(this).css({"background-color":"white"},1000);
      $(".ttl").css({"color":"green"},1000);
      $(".des").css({"color":"black"},1000);
    });

  });
</script>
</body>
</html>

＆＃13;

MOUSE HOVER上的内部DIV颜色文本没有变化

5 个答案: