Javascript 选定行上的CSS边框转换

我创建了HTML表，我想在用户单击该行（选定行）后进行“CSS边框转换”，并保存新的边框颜色，以知道该行已选定

就像这个URL中第一个标签为“draw”的按钮

<i> http://codepen.io/giana/pen/yYBpVY/ </i>

http://codepen.io/giana/pen/yYBpVY/ 

---

但是我不能这样做，有人能帮我吗，请

您需要启用

：hover

样式，以便在添加类时也能工作（在我的代码

.active

中），并使用javascript应用该类

所以

将成为

  &:hover,
  &.active{
    color: $yellow;
  }

（所有相关

：悬停
状态的etc）

这个类将使用这个代码进行切换

$('button').on('click',function(){
  $(this).toggleClass('active')
});

更新的演示在
好的，所以我深入了解了一下，了解了你在说什么，简单地从这个代码笔中获取代码，我所做的只是在悬停时删除，一切都很好

//颜色
$background:#fefefe；
$text:#4b507a；
$cyan:#60daaa；
$yellow:#fbca67；
$orange:#ff8a30；
$red:#f45e61；
$purple:#6477b9；
$blue:#0eb7da；
//基本风格
钮扣{
背景：无；
边界：0；
框大小：边框框；
框阴影：inset 0 2px$red；//使用inset框阴影而不是边框以简化大小
颜色：$红色；
字体大小：继承；
字号：700；
边缘：1米；
填料：1米2米；
文本对齐：居中；
文本转换：大写；
//必需，因为我们在伪元素上设置了绝对值
位置：相对位置；
垂直对齐：中间对齐；
&：：之前，
&：：之后{
框大小：边框框；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
}
}
.抽签{
过渡：颜色0.25s；
&：：之前，
&：：之后{
border:2px solid transparent；//将border设置为不可见，以便在转换开始之前，在0x0元素上看不到4px边框
宽度：0；
身高：0；
}
//这将覆盖顶部和右侧边界（向右展开，然后向下展开）
&：：之前{
排名：0；
左：0；
}
//这是底部和左侧边界（先向左展开，然后向上展开）
&：：之后{
底部：0；
右：0；
}
&：悬停，
&.主动{
颜色：$青色；
}
//悬停样式
&：hover：：在，
&：悬停：：之后，
&.活动：：之前，
&.active:：之后{
宽度：100%；
身高：100%；
}
&：hover：：在，
&.活动：：之前{
边框顶部颜色：$cyan；//使边框可见
右边框颜色：$青色；
过渡：
宽度0.25s放松，//宽度先扩展
高度0.25s减去0.25s；//然后是高度
}
&：悬停：：之后，
&.active:：之后{
边框底部颜色：$cyan；//使边框可见
左边框颜色：$青色；
过渡：
边框颜色0s减少0.5s，//等待：：before完成后再显示边框
宽度0.25s放松0.5s，//然后检查宽度
高度0.25s减去0.75s；//最后是高度
}
}
//继承自
.见面{
&：悬停，
&.主动{
颜色：$黄色；
}
//Start:：after与：：before处于相同的位置
&：：之后{
排名：0；
左：0；
}
//变色
&：hover：：在，
&.活动：：之前{
边框顶部颜色：$黄色；
右边框颜色：$黄色；
}
&：悬停：：之后，
&.active:：之后{
边框底色：$黄色；
左边框颜色：$黄色；
过渡：//首先设置高度动画，然后设置宽度动画
高度0.25秒放松，
宽0.25s，宽0.25s；
}
}
//不继承
.中心{
&：悬停，
&.主动{
颜色：$紫色；
}
//设置基础样式，我们将缩放而不是设置宽度/高度的动画
&：：之前，
&：：之后{
排名：0；
左：0；
身高：100%；
宽度：100%；
变换原点：中心；//确保从中心进行缩放（向外展开）
}
//标度3d（，）；
&：：之前{
镶边上衣：2件纯色$紫色；
底部边框：2件纯色$紫色；
变换：scale3d（0,1,1）；//仅收缩宽度
}
&：：之后{
左边框：2件纯色$紫色；
右边框：2件纯色$紫色；
变换：scale3d（1,0,1）；//仅收缩高度
}
&：hover：：在，
&：悬停：：之后，
&.活动：：之前，
&.active:：之后{
transform:scale3d（1,1,1）；//显示全尺寸
转变：转变0.5s；
}
}
//边框围绕元素旋转
//：：before包含三个单独显示的边框，一次一个
//：：after保留一个旋转以覆盖：：before的边框，使其外观看起来平滑
.旋转{
宽度：5em；
身高：5公分；
填充：0；
&：悬停，
&.主动{
颜色：$蓝色；
}
&：：之前，
&：：之后{
排名：0；
左：0；
}
&：：之前{
边框：2px实心透明；//我们再次设置边框颜色的动画
}
&：hover：：在，
&.活动：：之前{
边框顶部颜色：$blue；//显示边框
右边框颜色：$蓝色；
边框底色：$蓝色；
过渡：
边框顶部颜色0.15s线性，//错开边框外观
右边框颜色0.15s线性0.10s，
边框底色0.15s线性0.20s；
}
&：：之后{
边框：0实心透明；//使边框边缘变薄？我忘了我在做什么
}
&：悬停：：之后，
&.active:：之后{
边框顶部：2px实心$blue；//显示边框
边框左宽度：2px；//实心边，不可见边框
边框右侧宽度：2px；//实心边，不可见边框
变换：旋转（270度）；//围绕圆旋转
过渡：
变换0.4s线性0，
边框左宽度0s线性0.35s；//实心边柱旋转
}
}
.圆圈{
边界半径：100%；
盒影：无；
&：：之前，
&：：之后{
边界半径：100%；
}
}
.厚{
颜色：$红色；
&：悬停，
&.主动{
颜色：#fff；
字号：700；
}
&：：之前{
边框：2.5em实心透明；
z指数：-1；
}
&：：之后{
混合模式：颜色减淡；
z指数：-1；
}
&：hover：：在，
&.活动：：之前{
背景：红色；
边框顶部颜色：$红色；
右边框颜色：$红色；
边框底色：$红色；
过渡：
背景0s
$('button').on('click',function(){
  $(this).toggleClass('active')
});

//Colors
$background: #fefefe;
$text: #4b507a;

$cyan: #60daaa;
$yellow: #fbca67;
$orange: #ff8a30;
$red: #f45e61;
$purple: #6477b9;
$blue: #0eb7da;

// Basic styles
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px $red; // Using inset box-shadow instead of border for sizing simplicity
  color: $red;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;

  // Required, since we're setting absolute on pseudo-elements
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.draw {
    transition: color 0.25s;

  &::before,
  &::after {
    border: 2px solid transparent; // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover,
  &.active{
    color: $cyan;
  }

  // Hover styles
  &:hover::before,
  &:hover::after,
  &.active::before,
  &.active::after{
    width: 100%;
    height: 100%;
  }

  &:hover::before,
  &.active::before{
    border-top-color: $cyan; // Make borders visible
    border-right-color: $cyan;
    transition:
      width 0.25s ease-out, // Width expands first
      height 0.25s ease-out 0.25s; // And then height
  }

  &:hover::after,
  &.active::after{
    border-bottom-color: $cyan; // Make borders visible
    border-left-color: $cyan;
    transition:
      border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
      width 0.25s ease-out 0.5s, // And then exanding width
      height 0.25s ease-out 0.75s; // And finally height
  }
}

// Inherits from .draw
.meet {

  &:hover,
  &.active{
    color: $yellow;
  }

  // Start ::after in same position as ::before
  &::after {
    top: 0;
    left: 0;
  }

  // Change colors
  &:hover::before ,
  &.active::before{
    border-top-color: $yellow;
    border-right-color: $yellow;
  }

  &:hover::after,
  &.active::after{
    border-bottom-color: $yellow;
    border-left-color: $yellow;
    transition: // Animate height first, then width
      height 0.25s ease-out,
      width 0.25s ease-out 0.25s;
  }

}

// Does not inherit
.center {
  &:hover,
  &.active{
    color: $purple;
  }

  // Set up base styles, we're going to scale instead of animating width/height
  &::before,
  &::after {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-origin: center; // Ensure scaling is done from the center (expands outwards)
  }

  // scale3d(<scale-horizontal>, <scale-vertical>, <scale-depth>);
  &::before {
    border-top: 2px solid $purple;
    border-bottom: 2px solid $purple;
    transform: scale3d(0,1,1); // Shrink only width
  }

  &::after {
    border-left: 2px solid $purple;
    border-right: 2px solid $purple;
    transform: scale3d(1,0,1); // Shrink only height
  }

  &:hover::before,
  &:hover::after,
  &.active::before,
  &.active::after{
    transform: scale3d(1,1,1); // Show full-size
    transition: transform 0.5s;
  }
}

// Border spins around element
// ::before holds three borders that appear separately, one at a time
// ::after holds one border that spins around to cover ::before's borders, making their appearance seem smooth

.spin {
  width: 5em;
  height: 5em;
  padding: 0;

  &:hover,
  &.active {
    color: $blue;
  }

  &::before,
  &::after {
    top: 0;
    left: 0;
  }

  &::before {
    border: 2px solid transparent; // We're animating border-color again
  }

  &:hover::before,
  &.active::before{
    border-top-color: $blue; // Show borders
    border-right-color: $blue;
    border-bottom-color: $blue;

    transition:
      border-top-color 0.15s linear, // Stagger border appearances
      border-right-color 0.15s linear 0.10s,
      border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
  }

  &:hover::after,
  &.active::after{
    border-top: 2px solid $blue; // Shows border
    border-left-width: 2px; // Solid edges, invisible borders
    border-right-width: 2px; // Solid edges, invisible borders
    transform: rotate(270deg); // Rotate around circle
    transition:
      transform 0.4s linear 0s,
      border-left-width 0s linear 0.35s; // Solid edge post-rotation
  }
}

.circle {
  border-radius: 100%;
  box-shadow: none;

  &::before,
  &::after {
    border-radius: 100%;
  }
}

.thick {
  color: $red;

  &:hover,
  &.active{
    color: #fff;
    font-weight: 700;
  }

  &::before {
    border: 2.5em solid transparent;
    z-index: -1;
  }

  &::after {
    mix-blend-mode: color-dodge;
    z-index: -1;
  }

  &:hover::before,
  &.active::before {
    background: $red;
    border-top-color: $red;
    border-right-color: $red;
    border-bottom-color: $red;
    transition:
      background 0s linear 0.4s,
      border-top-color 0.15s linear,
      border-right-color 0.15s linear 0.15s,
      border-bottom-color 0.15s linear 0.25s;
  }

  &:hover::after,
  &.active::after{
    border-top: 2.5em solid $red;
    border-left-width: 2.5em;
    border-right-width: 2.5em;
  }
}

/* Page styling */

html {
  background: #1E202D;
}

body {
  //background: $background;
  color: $text;
  font: 300 24px/1.5 Lato, sans-serif;
  margin: 1em auto;
  max-width: 36em;
  padding: 1em 1em 2em;
  text-align: center;
  isolation: isolate;
}

h1 {
  font-weight: 300;
  font-size: 2.5em;
}

<button class="draw">
  <table>
    <tr>
      <td>Example</td>
      <td>Example</td> 
      <td>Example</td>
    </tr>
    <tr>
      <td>This</td>
      <td>Is</td> 
      <td>TEST</td>
    </tr>
  </table>
</button>