Question

我正试图改变＆＃34; well＆＃34;在鼠标悬停但无法做到这一点。我一直在尝试使用以下代码：

<script type="text/javascript">
    function ChangeColor(well, highLight)
    {
    if (highLight)
    {
      well.style.backgroundColor = '#dcfac9';
    }
         }
</script>
PHP:

echo "  <div class=\"well\" onmouseover=\"ChangeColor(this, true);\"\n"; 
echo " onmouseout=\"ChangeColor(this, false);\"> \n"; 
echo "something";
echo "  </div>\n";

上面的代码在鼠标悬停时很好地改变了颜色，但它正在穿过＆＃34; well＆＃34;的区域。请帮忙解决。

Answer 1

<link rel="stylesheet"  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>


<div class="well">
	 <p>
     This is a well content
   </p>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
  $(".well").mouseenter(
    function(){
      $(this).css('background-color','red');
    });
  
   $(".well").mouseleave(
    function(){
      $(this).css('background-color','#f5f5f5');
    });
</script>

Answer 2

通过JavaScript执行此操作似乎有点矫枉过正。这可以通过使用CSS轻松完成：

.well:default
{
  background-color: #ccc;
}
.well:hover
{
  background-color: #000;
}

Answer 3

var getDefaultBg    = $(".well").css("background");
$(".well").mouseover(function() {
    $(this).css("background", "#000");
}). mouseout(function() {
    $(this).css("background", getDefaultBg);
});

只需根据您的要求使用它。

Answer 4

那是我想要的剧本：

<script>
$(document).ready(function(){
    $(".well").mouseenter(function(){
        $(this).css("background-color", "#efefef");
    });
    $(".well").mouseleave(function(){
        $(this).css("background-color", "#f5f5f5");
    });
});
</script>

改变bootstrap的颜色＆＃34; well＆＃34;在鼠标悬停

4 个答案: