Javascript 使用'；这'；

我试图使用javascript代码创建按钮悬停时的颜色变化，我不清楚的部分是如何设置“this”属性，以便悬停元素触发特定按钮的css部分

$（'this'）.mouseover（函数（）{
$（'#div'）.removeClass（'svg-active'）；
$（'#span'）.removeClass（'light-blue-link'）；
});
$（'this'）.mouseout（函数（）{
$（'#div'）.removeClass（'svg-active'）；
$（'#span'）.removeClass（'light-blue-link'）；
});
。按钮外部{
边缘顶部：30px；
}
.按钮{
高度：30px；
宽度：自动；
光标：指针；
z指数：1；
}
.按钮：：之前{
显示：内联块；
内容：''；
身高：100%；
垂直对齐：中间对齐；
}
.浅蓝色链接{
颜色：rgb（88202230）；
}
跨度{
字体大小：300；
过渡：颜色1s轻松；
}

轮廓
朋友
时间线
信息
书签
注意：首先，我要解决JavaScript/jQuery问题，但请注意最后的“然而”部分——你根本不需要它们


您需要的是
.button
或
div.button
，而不是
'this

但这不是主要问题

主要问题是在多个元素上使用相同的
id
。不能这样做，它是无效的，浏览器通常会使用第一个元素，而忽略其他元素上的
id

你根本不需要
id
s。在处理程序中，
此
将引用挂接事件的元素，因此可以使用
div
和
span
位于元素内部（通过
find
）来查找它们：

$('div.button').mouseover(function() {
  var $this = $(this);
  $this.find('div').removeClass('svg-active');
  $this.find('span').removeClass('light-blue-link');
});
$('div.button').mouseout(function() {
  var $this = $(this);
  $this.find('div').removeClass('svg-active');
  $this.find('span').removeClass('light-blue-link');
});

更新示例：


$（'div.button'）.mouseover（函数（）{
var$this=$（this）；
$this.find（'div'）.addClass（'svg-active'）；
$this.find（'span'）.addClass（'light-blue-link'）；
});
$（'div.button'）.mouseout（函数（）{
var$this=$（this）；
$this.find（'div'）.removeClass（'svg-active'）；
$this.find（'span'）.removeClass（'light-blue-link'）；
});
。按钮外部{
边缘顶部：30px；
}
.按钮{
高度：30px；
宽度：自动；
光标：指针；
z指数：1；
}
.按钮：：之前{
显示：内联块；
内容：''；
身高：100%；
垂直对齐：中间对齐；
}
.浅蓝色链接{
颜色：rgb（88202230）；
}
跨度{
字体大小：300；
过渡：颜色1s轻松；
}

轮廓
朋友
时间线
信息
书签
注意：首先，我要解决JavaScript/jQuery问题，但请注意最后的“然而”部分——你根本不需要它们


您需要的是
.button
或
div.button
，而不是
'this

但这不是主要问题

主要问题是在多个元素上使用相同的
id
。不能这样做，它是无效的，浏览器通常会使用第一个元素，而忽略其他元素上的
id

你根本不需要
id
s。在处理程序中，
此
将引用挂接事件的元素，因此可以使用
div
和
span
位于元素内部（通过
find
）来查找它们：

$('div.button').mouseover(function() {
  var $this = $(this);
  $this.find('div').removeClass('svg-active');
  $this.find('span').removeClass('light-blue-link');
});
$('div.button').mouseout(function() {
  var $this = $(this);
  $this.find('div').removeClass('svg-active');
  $this.find('span').removeClass('light-blue-link');
});

更新示例：


$（'div.button'）.mouseover（函数（）{
var$this=$（this）；
$this.find（'div'）.addClass（'svg-active'）；
$this.find（'span'）.addClass（'light-blue-link'）；
});
$（'div.button'）.mouseout（函数（）{
var$this=$（this）；
$this.find（'div'）.removeClass（'svg-active'）；
$this.find（'span'）.removeClass（'light-blue-link'）；
});
。按钮外部{
边缘顶部：30px；
}
.按钮{
高度：30px；
宽度：自动；
光标：指针；
z指数：1；
}
.按钮：：之前{
显示：内联块；
内容：''；
身高：100%；
垂直对齐：中间对齐；
}
.浅蓝色链接{
颜色：rgb（88202230）；
}
跨度{
字体大小：300；
过渡：颜色1s轻松；
}

轮廓
朋友
时间线
信息
书签
在jQuery中，
$（）
中作为字符串的参数是一个选择器。由于jQuery方法在DOM中查找元素/标记（如下面所示）而失败，下面还有一个标记无效

<this></this>

在jQuery中，
$（）
中作为字符串的参数是一个选择器。由于jQuery方法在DOM中查找元素/标记（如下面所示）而失败，下面还有一个标记无效

<this></this>

你确定
$（'this'）
是你想要做的吗？@Derek朕會功夫 如果有更好的方法，我很乐意学习：）
$（'this'）
正在选择根本不起作用的元素。为什么用JS。是否有任何原因，请检查我的答案是否正确information@Venkatraman，谢谢你的提示。我是用纯CSS做的：）你确定你想做的是
$（'this'）
朕會功夫 如果有更好的方法，我很乐意学习：）
$（'this'）
正在选择根本不起作用的元素。为什么用JS。是否有任何原因，请检查我的答案是否正确information@Venkatraman，谢谢你的提示。我是用纯CSS做的：）谢谢你对这个话题如此精彩的解释。我确实从中吸取了教训，CSS方法非常有效。祝你一天愉快@安德鲁：很高兴这有帮助！谢谢你对这个话题如此精彩的解释。我确实从中吸取了教训，CSS方法非常有效。祝你一天愉快@安德鲁：很高兴这有帮助！