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懸停矛盾

回答

相關問題