Question

我正在尝试使用javascript代码创建按钮的悬停颜色更改，对我来说不明确的部分是如何设置'this'属性，以便hovered元素触发特定按钮的css部分。

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

.button-outer {
	margin-top: 30px;
}

.button {
  height: 30px;
  width: auto;
  cursor: pointer;
  z-index: 1;
}

.button::before {
  display:inline-block;
  content:'';
  height: 100%;
  vertical-align: middle;
}

.light-blue-link {
	color: rgb(88, 202, 230);
}

span {
	font-weight: 300;
	transition: color 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button-outer'>



  <div class='button'>
    <div id='div' class='svg profile'></div>
    <span id='span' class=''>Profile</span>
  </div>
  <div class='button'>
    <div id='div' class='svg friends'></div>
    <span id='span' class=''>Friends</span>
  </div>
  <div class='button'>
    <div id='div' class='svg timeline'></div>
    <span id='span' class=''>Timeline</span>
  </div>
  <div class='button'>
    <div id='div' class='svg messages'></div>
    <span id='span' class=''>Messages</span>
  </div>
  <div class='button'>
    <div id='div' class='svg bookmarks'></div>
    <span id='span' class=''>Bookmarks</span>
  </div>



</div>

Answer 1

注意：首先我解决JavaScript / jQuery问题，但最后请注意“But”位 - 你根本不需要它们。

而不是'this'，而不是.button或div.button。

但这不是主要问题。

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

您根本不需要id。在处理程序中，this将引用您挂接事件的元素，因此您可以使用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(function() {
  var $this = $(this);
  $this.find('div').addClass('svg-active');
  $this.find('span').addClass('light-blue-link');
});
$('div.button').mouseout(function() {
  var $this = $(this);
  $this.find('div').removeClass('svg-active');
  $this.find('span').removeClass('light-blue-link');
});

.button-outer {
  margin-top: 30px;
}
.button {
  height: 30px;
  width: auto;
  cursor: pointer;
  z-index: 1;
}
.button::before {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}
.light-blue-link {
  color: rgb(88, 202, 230);
}
span {
  font-weight: 300;
  transition: color 1s ease;
}

<div class='button-outer'>
  <div class='button'>
    <div class='svg profile'></div>
    <span class=''>Profile</span>
  </div>
  <div class='button'>
    <div class='svg friends'></div>
    <span class=''>Friends</span>
  </div>
  <div class='button'>
    <div class='svg timeline'></div>
    <span class=''>Timeline</span>
  </div>
  <div class='button'>
    <div class='svg messages'></div>
    <span class=''>Messages</span>
  </div>
  <div class='button'>
    <div class='svg bookmarks'></div>
    <span class=''>Bookmarks</span>
  </div>
</div>
<!-- Scripts at the bottom unless you have a good reason to do something else -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我还将mouseover回调中的来电更改为addClass而不是removeClass。

需要考虑的其他事项：

您可以使用事件委派，而不是直接在按钮上挂起事件：

$(".button-outer").on("mouseover", ".div.button", function() {
    // ...
});

您可以在按钮本身而不是在其中的内容上切换类，然后使用结构化CSS来应用样式

但是，您根本不需要JavaScript：只需使用div.button:hover div规则和div.button:hover span规则：

.button-outer {
  margin-top: 30px;
}
.button {
  height: 30px;
  width: auto;
  cursor: pointer;
  z-index: 1;
}
.button::before {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}
div.button:hover span {
  color: rgb(88, 202, 230);
}
span {
  font-weight: 300;
  transition: color 1s ease;
}

<div class='button-outer'>
  <div class='button'>
    <div class='svg profile'></div>
    <span class=''>Profile</span>
  </div>
  <div class='button'>
    <div class='svg friends'></div>
    <span class=''>Friends</span>
  </div>
  <div class='button'>
    <div class='svg timeline'></div>
    <span class=''>Timeline</span>
  </div>
  <div class='button'>
    <div class='svg messages'></div>
    <span class=''>Messages</span>
  </div>
  <div class='button'>
    <div class='svg bookmarks'></div>
    <span class=''>Bookmarks</span>
  </div>
</div>
<!-- Scripts at the bottom unless you have a good reason to do something else -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

在jQuery中，作为$()内部字符串的参数是一个选择器。它失败了，因为jQuery方法在你的DOM中查找元素/标签，如下所示，下面还有一个是无效标签。

<this></this>

尝试使用有效的选择器，例如$('div.button')

注意：ID用于唯一标识符。请使用一次。如果你多次使用它不是语义。

高效的方式将来自CSS。主要的好处是鼠标输出案例将由浏览器处理。

div.button:hover {
  color: blue;
  font-size: 27px;
  width:100px;
}

使用'this'在mouserover上触发addClass

2 个答案: