悬停后的颜色TD

时间：2016-06-07 10:59:28

标签： html css css3

例如，我在这一行中有1行和多个单元格的表。

<table>
  <tr>
    <td></td>
    <td class="red"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

使用JS，我选择一个单元格并对其应用一些类，为该单元格着色。我需要什么？点击之前我需要颜色（选择）单元格。例如，当我将鼠标悬停在最后一个单元格上时，我需要在具有class="red"的单元格和具有hover的单元格之间使用颜色单元格。像

这样的东西 
.red + :hover {
    background: green;
}

如果我将鼠标放入左侧，在具有class="red"的单元格之前，单元格还需要在悬停（包括悬停）和具有某个类的单元格之间进行着色。它只能用CSS完成吗？在实际情况中，我有很多行和很多单元格。

JSFiddle - https://jsfiddle.net/ssq8dzje/

7 个答案:

答案 0 :(得分：4)

CSS唯一解决方案就在这里！ = d

＆＃13;
＆＃13; 
table {
    border-collapse: collapse;
    width: 100%;
}
td {
    border: 1px solid #000;
    cursor: pointer;
    height: 30px;
}
.red {
    background: #f33 !important;
}
td:hover {
    background: #22f !important;
}

tr:hover td.red ~ td,
tr:hover td:hover ~ td {
    background: green;
}

td.red ~ td:hover ~ td,
td:hover ~ td.red ~ td,
tr:hover td.red:hover ~ td {
    background: transparent;
}
＆＃13; 
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td class="red"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

这是相当hackish但它至少起作用。也有可能减少选择器的数量，但我现在并不担心它。

答案 1 :(得分：4)

请参阅更新1了解我的更新/新答案。

由于CSS不是一种编程语言而且无法处理逻辑，因此只有 <（显然@Midas找到了一种方法可以单独使用CSS）可以使用JS。

所以它非常像射程，对吧？这是用jQuery做的解决方案

＆＃13;
＆＃13; 
$(function(){
  var endSelection = true;
  $("td").click(function(){
    var targetTr = $(this).closest("tr");
    var thisOrder = $(this).index();
    var redOrder = $(targetTr).find(".red").index();
    targetTr.find(".selected").removeClass("selected");
    targetTr.find(".red, .active").removeClass("red active").addClass("selected");
    $(this).addClass("selected");
    targetTr.find(".red, .active").removeClass("red active");
    if (endSelection) {
      console.log("start selection: " + redOrder + " end selection: " + thisOrder);
      endSelection = false;
    } else {
      $(this).addClass("red");
      endSelection = true;
    }
  });
  $("td").hover(function(){
    if (endSelection) {
      var targetTr = $(this).closest("tr");
      var thisOrder = $(this).index();
      var redOrder = $(targetTr).find(".red").index();
      $(targetTr).find("td").each(function(i, elem){
        if (thisOrder > redOrder) {
          if (i > redOrder && i < thisOrder)
            $(this).addClass("active");
        } else if (thisOrder < redOrder) {
          if (i < redOrder && i > thisOrder)
          $(this).addClass("active");
        }
      });
    }
  }).mouseout(function(){
    $(this).closest("tr").find("td.active").removeClass("active");
  });
})
＆＃13; 
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #000;
  cursor: pointer;
  height: 30px;
}

td.selected {
  background: #ffaaaa;
}

td:hover {
  background: #2222ff;
}

td.active {
  background: green;
}

td.red {
  background: #ff3333;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="red"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

说明

现在要解释突出显示，概念很简单：我们将记录索引td我们的鼠标和索引{{1 } td 。然后，我们考虑简单逻辑并使用循环，我们比较.red，i和thisOrder以找到我们必须添加类redOrder的元素。 / p>

最后，当我们执行鼠标移出事件时，请删除所有active类。

如果您不熟悉jQuery，请随意发表评论;）

更新1

显然，我想念OP想要拥有多行＆＃34;的文本，所以结果应该是＆＃34;创建表格＆＃34;在许多文字处理器应用程序这一次，它无法单独在CSS中完成，因为它无法向后选择。

我不知道你想要哪种类型，但我已经记住了2。

样式1：矩形选择

对尺寸标记有用吗？...

＆＃13;
＆＃13; 
.active
＆＃13; 
$(function(){
  var endSelection = true;
  $("td").click(function(){
    var targetTable = $(this).closest("table");
    var thisPos = getPosXY($(this));
    var redPos = getPosXY($($(targetTable).find(".red")));
    targetTable.find(".selected").removeClass("selected");
    targetTable.find(".red, .active").removeClass("red active").addClass("selected");
    $(this).addClass("selected");
    targetTable.find(".red, .active").removeClass("red active");
    if (endSelection) {
      console.log(
        "startX:" + redPos.x,
        "endX:" + thisPos.x,
        "startY:" + redPos.y,
        "endY:" + thisPos.y
      );
      endSelection = false;
    } else {
      $(this).addClass("red");
      endSelection = true;
    }
  });
  function getPosXY($elem) {
    return {
      x: $elem.index(),
      y: $elem.closest("tr").index()
    }
  }
  
  $(".selection-grid td").hover(function(){
    if (endSelection) {
      var targetTable = $(this).closest("table");
      var tableH = targetTable.find("tr").eq(0).length;
      var tableW = targetTable.find("tr").eq(0).find("td").length;
      var thisPos = getPosXY($(this));
      var redPos = getPosXY(targetTable.find(".red"));
      var xPositive = false; //goes right means +
      var yPositive = false; //goes down means +
      if (thisPos.y > redPos.y) {
        yPositive = true;
      } else if (thisPos.y < redPos.y ) {
        yPositive = false;
      }
      if (thisPos.x > redPos.x) {
        xPositive = true;
      } else if (thisPos.x < redPos.x) {
        xPositive = false;
      }
      targetTable.find("td").each(function(){
        var currentPos = getPosXY($(this));
        var currentPosX = $(this).index();
        if (xPositive === true && yPositive === true) {
          if (
            currentPos.y >= redPos.y &&
            currentPos.y <= thisPos.y &&
            currentPos.x >= redPos.x &&
            currentPos.x <= thisPos.x
          ) {
            $(this).addClass("active");
          }
        } else if (xPositive === false && yPositive === false) {
          if (
            currentPos.y <= redPos.y &&
            currentPos.y >= thisPos.y &&
            currentPos.x <= redPos.x &&
            currentPos.x >= thisPos.x
          ) {
            $(this).addClass("active");
          }
        } else if (xPositive === true && yPositive === false){
          if (
            currentPos.y <= redPos.y &&
            currentPos.y >= thisPos.y &&
            currentPos.x >= redPos.x &&
            currentPos.x <= thisPos.x
          ) {
            $(this).addClass("active");
          }
        } else if (xPositive === false && yPositive === true){
          if (
            currentPos.y >= redPos.y &&
            currentPos.y <= thisPos.y &&
            currentPos.x <= redPos.x &&
            currentPos.x >= thisPos.x
          ) {
            $(this).addClass("active");
          }
        } else {
          return false;
        }
      });
      
      
      
      
      
      /*var thisOrder = $(this).index();
      var redOrder = $(targetTr).find(".red").index();
      $(targetTr).find("td").each(function(i, elem){
        if (thisOrder > redOrder) {
          if (i > redOrder && i < thisOrder)
            $(this).addClass("active");
        } else if (thisOrder < redOrder) {
          if (i < redOrder && i > thisOrder)
          $(this).addClass("active");
        }
      });*/
    }
  }).mouseout(function(){
    $(this).closest("table").find(".active").removeClass("active");
  });
})
＆＃13; 
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #000;
  cursor: pointer;
  height: 30px;
}

td.selected {
  background: #ffaaaa;
}

td:hover {
  background: #2222ff;
}

td.active {
  background: green;
}

td.red {
  background: #ff3333;
}
＆＃13;
＆＃13;
＆＃13;

样式2：段落形状选择

适用于日历标记等......

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="selection-grid">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="red"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
＆＃13; 
$(function(){
  var endSelection = true;
  $("td").click(function(){
    var targetTable = $(this).closest("table");
    var thisPos = getPosXY($(this));
    var redPos = getPosXY($($(targetTable).find(".red")));
    targetTable.find(".selected").removeClass("selected");
    targetTable.find(".red, .active").removeClass("red active").addClass("selected");
    $(this).addClass("selected");
    targetTable.find(".red, .active").removeClass("red active");
    if (endSelection) {
      console.log(
        "startX:" + redPos.x,
        "endX:" + thisPos.x,
        "startY:" + redPos.y,
        "endY:" + thisPos.y
      );
      endSelection = false;
    } else {
      $(this).addClass("red");
      endSelection = true;
    }
  });
  function getPosXY($elem) {
    return {
      x: $elem.index(),
      y: $elem.closest("tr").index()
    }
  }
  
  $(".selection-grid td").hover(function(){
    if (endSelection) {
      var targetTable = $(this).closest("table");
      var tableH = targetTable.find("tr").eq(0).length;
      var tableW = targetTable.find("tr").eq(0).find("td").length;
      var thisPos = getPosXY($(this));
      var redPos = getPosXY(targetTable.find(".red"));
      var positive = false; //goes down  means +
      if (thisPos.y > redPos.y || thisPos.y == redPos.y && thisPos.x > redPos.x) {
        positive = true;
      } else if (thisPos.y < redPos.y || thisPos.y == redPos.y && thisPos.x < redPos.x) {
        positive = false;
      }
      targetTable.find("td").each(function(){
        var currentPos = getPosXY($(this));
        var currentPosX = $(this).index();
        if (positive === true) {
          if (
            currentPos.y > redPos.y &&
            currentPos.y < thisPos.y ||
            currentPos.y == redPos.y && redPos.y != thisPos.y && redPos.y != thisPos.y && currentPos.x > redPos.x ||
            currentPos.y == thisPos.y && redPos.y != thisPos.y && redPos.y != thisPos.y && currentPos.x < thisPos.x ||
            currentPos.y == thisPos.y && redPos.y == thisPos.y && currentPos.x > redPos.x && currentPos.x < thisPos.x
          ) {
            $(this).addClass("active");
          }
        } else if (positive === false) {
          if (
            currentPos.y < redPos.y &&
            currentPos.y > thisPos.y ||
            currentPos.y == redPos.y && redPos.y != thisPos.y && currentPos.x < redPos.x ||
            currentPos.y == thisPos.y && redPos.y != thisPos.y && currentPos.x > thisPos.x ||
            currentPos.y == thisPos.y && redPos.y == thisPos.y && currentPos.x < redPos.x && currentPos.x > thisPos.x
          ) {
            $(this).addClass("active");
          }
        } else {
          return false;
        }
      });
      
      
      
      
      
      /*var thisOrder = $(this).index();
      var redOrder = $(targetTr).find(".red").index();
      $(targetTr).find("td").each(function(i, elem){
        if (thisOrder > redOrder) {
          if (i > redOrder && i < thisOrder)
            $(this).addClass("active");
        } else if (thisOrder < redOrder) {
          if (i < redOrder && i > thisOrder)
          $(this).addClass("active");
        }
      });*/
    }
  }).mouseout(function(){
    $(this).closest("table").find(".active").removeClass("active");
  });
})
＆＃13; 
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #000;
  cursor: pointer;
  height: 30px;
}

td.selected {
  background: #ffaaaa;
}

td:hover {
  background: #2222ff;
}

td.active {
  background: green;
}

td.red {
  background: #ff3333;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

这样的东西？

＆＃13;
＆＃13; 
$(function() {
  var countClicks = 0;

  $("td").click(function() {
    if (countClicks == 2) {
      $("td").removeClass("active start end");
      countClicks = 0;
    }
    countClicks++;
    if (countClicks == 1) {
      $(this).addClass("active start");
    } else if (countClicks == 2) {
      $(this).addClass("active end");
    }
  });

  $("td").hover(function() {
    var start = $(".start").index();
    var end = $(".end").index();
    if (start < 0 && end < 0 || start > 0 && end > 0) return;
    $("td").removeClass("red");
    var current = $(this).index();
    if (start < current)
      $("td").slice(start, current).addClass("red");
    if (start > current)
      $("td").slice(current, start).addClass("red");
  });
});
＆＃13; 
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #000;
  cursor: pointer;
  height: 30px;
}

td:hover {
  background: #2222ff;
}

.red,
.active {
  background: #ff3333;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

你需要这样吗？

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("td").mouseover(function(){
        $(".red").css("background","green");
    });
$("td").mouseleave(function(){
    $(".red").css("background","none");
});
});
</script>

</head>
<body>
<table>
  <tr>
    <td>dsadsa</td>
    <td class="red">dddd</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
    <td>dsad</td>
  </tr>
</table>

</body>
</html>

答案 4 :(得分：0)

我已经编写了代码，用于突出显示颜色从红色到td悬停的确切要求。 HTML 

 <table>
  <tr>
    <td>demo1</td>
    <td class="red inital">Demo 2</td>
    <td>Demo 3</td>
    <td>Demo 4</td>
    <td>Demo 5</td>
    <td>demo</td>
    <td>demo</td>
    <td>demo </td>
    <td>demo</td>
    <td>demo</td>
    <td>demo</td>
  </tr>
</table>

$( "table td" ).mouseover(function() {
    var redIndex = ($(this).parent('tr').find('.red')).index()+1;
  var currentIndex = $(this).index()+1;
  for(var i=redIndex;i<currentIndex;i++) {
  $('td').eq(i).addClass('red');
  }
});

$( "table td" ).mouseleave(function() {
    var redIndex = ($(this).parent('tr').find('.red').not('.initial')).index();
  $('td').removeClass('red');
  $('td').eq(redIndex).addClass('red');

  //alert(redIndex);

});

.red { background: red; }
table td { cursor: pointer; }

见jsFiddle enter link description here

答案 5 :(得分：0)

这是我使用 CSS 所取得的成就，即每当用户 mouseenter red class 后，此CSS代码会更改所有 td bg颜色除了红色和第一个td类。在课堂红色之前的一个td可以实现相同的 。

tr:hover > td:nth-child(1n+3):not(.red){
background: #2222ff;
}

答案 6 :(得分：0)

I don't Know whether this code is correct or not  
  <!DOCTYPE html>
    <html>
    <head>
    <style>

    table, th, td:hover {
        border: 1px solid black;
    }
    .mouseover{
     bgcolor:green;
    }
    </style>
    </head>
    <body>

        <table class="hoverTable">
     <tr>
      <td>Text 1B</td>
      <td  bgcolor="green">Text A</td>

      <td>Text 1C</td>


      <td>Text 2A</td>
      <td>Text 2B</td>
      <td>Text 2C</td>


      <td>Text 3A</td>
      <td>Text 3B</td>
      <td>Text 3C</td>
     </tr>
    </table>
      </tr>
    </table>



    </body>
    </html>
相关问题
最新问题