Question

当我将鼠标悬停在我的引导按钮上时，我看到这个奇怪的按钮行为（按钮上的文字变得几乎看不见）。

这是我的标记（带引导程序的Salesforce VF页面）

<apex:page >
<head>

<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>

        <style>


           .red{
            color:red;
            }
        .form-area
            {
            //background-color: #FAFAFA;
            background-color:#77F2F2;
            padding: 10px 40px 60px;
                margin: 10px 0px 60px;
            border: 1px solid GREY;
            }
            #submit
            {
             //color:#BF99E5;
             font-family: "Helvetica";
             border-radius:10px;
             padding:10px;
            }
        </style>

        <script>
       j$ = jQuery.noConflict();

         j$(document).ready(function(){ 
             //alert("test");


        //j$('#submit').hover(function(){alert('thisissdfsdfh');});
     j$('#characterLeft').text('140 characters left');
     //j$('#btnSubmit').focus(function(){alert('sdfsdf');});
     j$('#message').keydown(function () {
        var max = 140;
        var len =  j$(this).val().length;
        if (len >= max) {
             j$('#characterLeft').text('You have reached the limit');
            j$('#characterLeft').addClass('red');
            j$('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            j$('#characterLeft').text(ch + ' characters left');
           j$('#btnSubmit').removeClass('disabled');
            j$('#characterLeft').removeClass('red');            
        }
    });    
});

        </script>

    </head>
     <apex:form >
    <div class="container">
<div class="col-md-10">
    <div class="form-area">  

        <br />
                     <h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
        <br />
                    <div class="form-group">
                       <input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/> 
                    </div>

                    <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
                      <input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
                    </div>   

                    </div>



                    <div class="form-group">
                       <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
              <input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
            </div> 
                    </div> 
                    <div class="form-group">
                       <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/> 
                    </div>
                    <div class="form-group">
                    <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
                     <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                   
                    </div>


                <center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>

    </div>
</div>
</div>
        </apex:form>
</apex:page>

在HTML的最后一行，如果我删除属性＆＃34; class =＆＃34; btn btn-primary pull-right＆＃34;从按钮标签然后行为是好的。

当鼠标悬停时，它看起来如下所示：

当鼠标悬停时，它看起来不错：

有人可以告诉我出了什么问题吗？

Answer 1

在你的css中试试这个，

#submit:hover, #submit:focus, #submit:active {
  color:#BF99E5;
}

Bootstrap在悬停时具有自定义CSS，处于活动状态，专注于适当的元素。这应该覆盖它们

Answer 2

您的某些代码似乎会覆盖 bootstrap 的样式。但是，如果您真的想要更改按钮上的文字颜色，那么您可以在样式中添加hover，如：

input#submit:hover{
  color: #000; /* Black */
}

而已！ :)快乐编码:)请评论如果您的解决方案有问题，我很乐意帮助他人：）

Bootstrap：悬停时按钮外观发生变化

2 个答案: