jquery mouseover与CSS悬停矛盾

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

为了更加震惊，在CSS中存在悬停事件，当鼠标悬停时，输入文本字段的边框将变为蓝色。但我也有jQuery中的另一个事件，当用户将负数放入输入文本字段中时，它将具有更改并且输入文本字段的边框将变为红色。不知何故，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/

来源

2014-09-02 Matilda Yi Pan

的JS在你的榜样，如果CSS被删除甚至不工作。 – 2014-09-02 02:03:49

是的，我刚刚意识到它，但我不知道为什么这个JS部分不工作。 – 2014-09-02 02:05:27

问题的一部分是'document.getElementById（$（this）.attr（“id”））''。 'this'将是处理程序中的文本输入，并且您的任何输入都没有id。 – Bryan 2014-09-02 02:07:08

从JS不WOR

除了国王在你的例子中，你正在处理specificity issue。

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

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

类error只具有10的特异性，这意味着红色边框因此不适用。为了解决这个问题，你可以使用一个更具体的选择：

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

值得一提的是，选择具有相同的特异性input[type=text].error。但由于input[type=text].error先于它，所以应用它。（这是级联性质）。

，因为这是标记与jQuery，不过，我想你想沿着这些路线的东西：

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

Updated Example Here

来源

2014-09-02 02:16:37

谢谢你的回答。我仔细查看了答案中提到的特定问题页面。然而，我仍然不明白你如何计算点数，例如（元素= 1，属性选择器= 10，伪类= 10），并且它们没有在特异性问题页面中声明。再次感谢你。 – 2014-09-02 05:14:27

嗨，乔希，我有点得到你现在如何计算特异性。有a，b，c，d部分，a的优先级高于b，b高于c，依此类推。 a表示嵌入式样式，b表示ID，c表示类，属性和伪类，d表示元素类型和伪元素。你以10为单位。对于输入[type =“text”] .error，它具有0,0,2,1的特异性，即21.对于输入[type =“text”]：悬停，其特异性为0,0,1,2 ，等于12，对于.error，其特异性为0，0，1，0，= 10.请纠正我，如果我错了。谢谢。 – 2014-09-02 07:24:20

顺便说一下，我得到了我的结论：http://reference.sitepoint.com/css/specificity – 2014-09-02 07:29:32

试试这个

的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; 
}

来源

2014-09-02 02:36:01

它可能有效，但！重要的不是一个好的做法，因为它打破了层叠的本质。无论如何，谢谢你的回答..... – 2014-09-02 05:15:39

或者试试这类似于你的脚本：

$("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') 
     } 
    } 
});

来源

2014-09-02 03:00:19 bl2b

jquery mouseover与CSS悬停矛盾

回答

相关问题