Question

我在所有按钮上实现了CSS悬停方法。它看起来像这样：

.button:hover { background-color: #36a39c; }

此方法完全正常，直到我点击其中一个按钮。单击该按钮时，将使用以下代码调用JS函数：

   <div id= "one"><button class="button" id = "b1" value="0" onclick="checker(this.id)"></button></div>

这是JS脚本：

var checker = function(id)
{
   var xyz = id; 
   var value = document.getElementById(xyz).value

   if (answerjson[value].is_right_choice==1)
   {
      for (var i = 1; i <=4; i++) {
          document.getElementById("b"+i).style.background='#722F37';
      }
      document.getElementById(xyz).style.background='green';
      setTimeout(function(){ alert("Correct!"); }, 100);
   }
   else {
        for (var i = 1; i <=4; i++) {
          document.getElementById("b"+i).style.background='#722F37';

        }
        document.getElementById(xyz).style.background='red';
        setTimeout(function(){ alert("Sorry, Try Again"); }, 100);

   }

}

调用该脚本后，我的按钮在悬停时不再改变颜色。有什么想法吗？

Answer 1

您在JS代码中设置了内联$column1 = 'Column 1 value'; $column2 = 'Column 2 value'; $column3 = 'Column 3 value'; $string = "column1, column2, column3"; function get_variable_names($string) { $array = explode(", ", $string); return $array; } $variable_array = get_variable_names($string); foreach($variable_array as $str){ echo $$str.'<br/>'; }属性。

在内联样式中设置的属性总是覆盖CSS选择器（style=""除外），因此您的CSS不再执行任何操作。

您应该添加CSS类，而不是设置内联样式。

Answer 2

这是因为当您使用javascript添加背景颜色时，它会添加为内联样式，并且它会覆盖css类选择器，因为内联样式始终需要更多首选项。您需要使用该颜色创建一个类，并使用javascript添加/删除它。例如上课

require 'fyshuffle.class.php';
    function test($test){
    if(abs(min($test) - max($test)) > 1) return false;
    return true;
    }
    $hasil1=mysql_query("select * from tsoal where soalid='1'");
    $hasil2=mysql_query("select * from tsoal where soalid='2'");
    $hasil3=mysql_query("select * from tsoal where soalid='3'");
    $hasil4=mysql_query("select * from tsoal where soalid='4'");
    $row1 =mysql_fetch_array($hasil1);
    $row2 =mysql_fetch_array($hasil2);
    $row3 =mysql_fetch_array($hasil3);
    $row4 =mysql_fetch_array($hasil4);

    $array = array('one' => $row1, 'two' => $row2, 'three' => $row3, 'four' => $row4);

    $test = array();
    foreach ($array as $x => $y) {
        $test[$y] = 0;
    }
    $shuffle = new FYShuffle($array);
    for ($i = 0; $i < 4; $i++) {
        $result = $shuffle->fetch();
        $book=array();
        while ($result){
            $userid = $result{'soalid'};
            $book[$userid][$result{'pertanyaan'}] =  $row{'pilihan_a'};
            echo $userid;
            echo $book;
        }
    }

然后使用javascript添加它：

.green{
   background-color: green;
}

在按钮单击块上调用JS函数CSS：悬停

2 个答案: