Question

我有一个悬停事件应用于我的CSS中的输入文本字段，但我也有一个模糊事件应用于相同的元素。由于这两个事件不会同时发生，因此我认为使用两个事件并在事件发生时具有完全不同的效果是有意义的。不知何故，到目前为止只有css事件有效。但jquery之前有效，因为我添加了css部分后它停止工作。

为了更加明确，css中有一个悬停事件，当鼠标悬停时，输入文本字段的边框将变为蓝色。但是我在jquery中还有另一个事件，当用户将负数放入输入文本字段时，它将具有alter，输入文本字段的边框将变为红色。不知何故，jquery部分不起作用〜帮助！

HTML：

<div class="roundcorner">
    <table>
        <tr>
            <th>Out of 100 points how would you score Governemnt performance for each section.</th>
            <th>Most like to see increased</th>
            <th>Most willing to see decreased</th>
        </tr>
        <tbody>
            <tr>
                <td id="p2">
                    <input type="text" name="name" />
                </td>
                <td id="i1">lakdksakdmksa</td>
                <td id="d1">
                    <input type="radio" name="sex" />Yes</td>
            </tr>
            <tr>
                <td id="p2">
                    <input type="text" name="name" />
                </td>
                <td id="i2">dsfwsedfwefwe</td>
                <td id="d2">
                    <input type="radio" name="sex" />No</td>
            </tr>
        </tbody>
    </table>
    <div>

CSS：

.roundcorner {
    border: 1px solid grey;
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
    border-bottom: 0px;
}
.roundcorner table {
    // border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
    overflow: hidden;
}
th {
    background-color: #EEE;
    padding: 10px;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-collapse: collapse;
}
th:last-child {
    border-right: 0px;
}
td {
    text-align: centre;
    //border: 1px solid grey;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-collapse: collapse;
}
td:last-child {
    border-right: 0px;
}
tr:hover {
    background: #fafafa;
    // font-weight:bold;
}
input[type=radio] {
    vertical-align:middle;
    margin-left: 45%;
    margin-right: 45%;
}
input[type=text] {
    width:20%;
    height:20px;
    margin-left:40%;
    margin-right:40%;
    border-radius:3px;
    border: 1px solid grey;
}

input[type=text]:hover{
     border: 1px solid #0066FF;
    background-color: #FFFFFF;
}

td:first-child {
    width: 25%;
    height:60px;
}
td:nth-child(2) {
    width: 50%;
    text-align: center;
    height: auto;
    padding: 10px;
}
td:nth-child(3) {
    width: 25%;
    height:60px;
}

.inputbox {
    border: 1px solid #8FDAFF;
    background-color: #FFFFFF;
}
.error{
    border: 1px solid red;
}

javascript：

$(document).ready(function(){

    $("input:text").blur(function(event){
            if(event.which != 8){
                if(document.getElementById($(this).attr("id")).value < 0){
                    alert("Please do no put negative number.");
                    document.getElementById($(this).attr("id")).value=0;
                    $(this).addClass("error");
                }




            }

        }); 


});

更新链接： http://jsfiddle.net/matildayipan/4hwwqr73/

Answer 1

除了JS在您的示例中不起作用之外，您正在处理specificity issue。

您正在使用选择器input[type=text]设置初始边框，其特异性计算为11.（元素= 1，属性选择器= 10）。

将鼠标悬停在元素上时，您使用的选择器input[type=text]:hover的特异性为21（Element = 1，属性选择器= 10，伪类= 10）。

类error的特异性仅为10，这意味着不应用红色边框。要解决此问题，您可以使用更具体的选择器：

input[type=text].error {
    border: 1px solid red;
    outline: none;
}

值得注意的是，选择器具有与input[type=text].error相同的特异性。但由于input[type=text].error按顺序排在其前面，因此应用 it 。（这是级联性质）。

虽然这是用jQuery标记的，但我认为你想要这些内容：

$('input[type="text"]').on('blur', function(){
    $(this).removeClass('error');
    0 > parseInt(this.value) && $(this).addClass("error");
});

Updated Example Here

Answer 2

试试这个

的javascript

$(document).ready(function(){
    $("input[type='text']").blur(function(event){
        var TheValue = $(this).val();
        if( TheValue > 0 ){
            $(this).removeClass('error');
            // Do something here
        }else{
           alert("Please do no put negative number.");
           $(this).addClass('error');
           return false;
        }
    }); 
});

并且你的css添加了重要的

.error{
    border: 1px solid red !important;
 }

Answer 3

或者尝试类似于您的脚本：

$("input:text").blur(function(event, x){
    if(event.which != 8){
        if(parseInt(this.value) < 0){
            alert("Please do no put negative number.");
            this.value = 0;
            $(this).parent().addClass('error')
        }else{
            $(this).parent().removeClass('error')
        }
    }
});

jquery mouseover与css悬停相矛盾

3 个答案: