Question

我在使用JQuery时遇到了一些麻烦。网站上有 li 标记，它有以下样式：

     var fileName = @"C:\ExcelFile.xlsx";

 SpreadsheetControl spreadsheetControl1 = new SpreadsheetControl();

 using (FileStream stream = new FileStream(fileName, FileMode.Open))
 {
     spreadsheetControl1.LoadDocument(stream, DocumentFormat.OpenXml);
 }
 IWorkbook workbook = spreadsheetControl1.Document;
 workbook.Options.Export.Csv.ValueSeparator = ';';
 workbook.SaveDocument("d:\\test.csv", DocumentFormat.Csv);
 string whole_file = System.IO.File.ReadAllText(FileName);

 // Split into lines.
 whole_file = whole_file.Replace('\n', '\r');
 string[] lines = whole_file.Split(new char[] { '\r' },
     StringSplitOptions.RemoveEmptyEntries);

 // See how many rows and columns there are.
 int num_rows = lines.Length;
 int num_cols = lines[0].Split(',').Length;

 // Allocate the data array.
 string[,] values = new string[num_rows, num_cols];

 // Load the array.
 for (int r = 0; r < num_rows; r++)
 {
     string[] line_r = lines[r].Split(',');
     for (int c = 0; c < num_cols; c++)
         values[r, c] = line_r[c];
         //MessageBox.Show(line_r[c]);
 }

 int end;
 for (int i = 0; i < values.Length; i++)
 {

     int itemcount = values[i, 0].Count(x => x == ';');
     string tmpch = values[i, 0];
     string valeuradd;

     if (i == 0)
     {
         for (int x = 1; x < itemcount + 2; x++)
         {
             end = tmpch.IndexOf(";");
             if (end <= 0) { end = tmpch.Length; }
             valeuradd = tmpch.Substring(0, end);                       
             tmpch = tmpch.Substring(end + 1);                       
             DT.Columns.Add(valeuradd);
         }
     }

     else
     {
         DataRow row;
         row = DT.NewRow();
         for (int j = 1; j < itemcount + 2; j++)
         {

             end = tmpch.IndexOf(";");
             //MessageBox.Show(j.ToString());
             if (end <= 0) { end = tmpch.Length; }
             valeuradd = tmpch.Substring(0, end);
             row[j - 1] = valeuradd;                       
           tmpch = tmpch.Substring(end + 1);                       
         }
         DT.Rows.Add(row);
     }
 }

当有人试图点击此元素时，它的颜色变为静态，这是代码：

li { margin: 0; padding: 0; clear: both;}
li:hover {background-color: #FFFFFF; margin: 0; padding: 0; clear: both;}

然后在第二次点击时它会变成这样：

$('.li-element-class').css('background-color','#FFFFFF');

问题是，在那个动作之后，伪类li：hover停止工作，当光标在它上面时，元素不会改变它的颜色...

Google无法提出任何解决方案，所以我希望StackOverflow知道：）

这是HTML代码：

$('.li-element-class').css('background-color','inherit'); // also tried 'none' and 'transparent'

所有JQuery代码：

<li id="categoryButton22"><span class="menuico"></span><div style="width:70%;display:inline-block;"><a class="showMenuCover" category="22" parentcategory="1" style="color: rgb(0, 0, 0);">Садовая столовая мебель</a></div><div id="subCategoryGlyph22" style="display:none; padding-right:3px; float:right;"><span class="glyphicon glyphicon-menu-right"></span></div></li>

Answer 1

使用jQuery的.css()方法应该是执行任何操作的最后手段。相反，你应该改变元素通过类看起来的方式：

$(document).ready(function() {
  $('li').on('click', function() {
    if ($(this).hasClass('white-background')) {
      $(this).removeClass('white-background');
    } else {
      $(this).addClass('white-background');
    }
  });
});

body {
  background-color:#ccc;
}

li {
  margin: 0;
  padding: 0;
  clear: both;
}

li:hover {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  clear: both;
}

.white-background {
  background-color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<ul>
  <li class="li-element-class">
    1
  </li>
  <li class="li-element-class">
    2
  </li>
</ul>
</body>

JQuery brokes pseudoclass：在执行脚本后悬停

1 个答案: