与onmouseover和onmouseout一起使用时，为什么我的onclick事件不起作用？

时间：2019-12-17 15:26:13

标签： javascript html 

var b = document.getElementsByClassName("horizontal_nav_buttons");   //grab all the horizontal buttons..

function horizontal_nav_on_click(id) {		//clicking one of the horizontal nav buttons..
/*******************/
/* OnClick Effect  */
/*******************/
for (var i = 0; i < b.length; i++) {
    b[i].style.border = "thin solid #9ed3d2";						// reset them all back to their default style
	b[i].style.color = "black";	
	b[i].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	} 
	b[id].style.color = "red";
	b[id].style.border = "thin solid orange";											//change the style of the one we clicked!
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
}
function horizontal_nav_hover(id) {
	b[id].style.color = "red";
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
	b[id].style.border = "thin solid orange";
}
function horizontal_nav_out(id) {
	b[id].style.color = "black";
	b[id].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	b[id].style.border = "thin solid #9ed3d2";
}
.horizontal_nav_buttons {

	margin-left:10px;
	margin-top:3px;
	margin-right:-10px;
  
	background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
	border-radius:6px;
	height: 22px;
	border: thin solid #9ed3d2;
	
}
.Horizontal_Nav_Bar {
	
	background-color:#f1b5a8;
	border-radius: 25px 25px 25px 25px;
	height: 27px;
	/margin-top:2px;

}
<div class="Horizontal_Nav_Bar">
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)" onmouseover="horizontal_nav_hover(0)" onmouseout="horizontal_nav_out(0)">Link 1 </button>  
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)" onmouseover="horizontal_nav_hover(1)" onmouseout="horizontal_nav_out(1)">Link 2 Configuration</button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)" onmouseover="horizontal_nav_hover(2)" onmouseout="horizontal_nav_out(2)">Link 3 </button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)" onmouseover="horizontal_nav_hover(3)" onmouseout="horizontal_nav_out(3)">Link 4 </button>		</div>

谁能帮助我了解为什么onClick事件无法更改按钮的样式？我不知道为什么这行不通。当我删除onmouseover事件和onmouseout事件时，onclick会按预期工作。

2 个答案:

答案 0 :(得分：2)

您的onmouseout会覆盖您在onClick事件中放置在按钮上的样式。只需删除对onmouseout的调用，您会发现它工作正常。

编辑：

@Dumisani指出，退出按钮时，这不会删除样式。为了解决这个问题，只需使用一个称为clicked的简单变量来跟踪哪个是活动的。

在您的onclick集中，clicked =设置为传递给clicked函数的id的值。然后在onmouseout中更新单击id！=的每个元素。 

var b = document.getElementsByClassName("horizontal_nav_buttons");   //grab all the horizontal buttons..

var clicked = -1;

function horizontal_nav_on_click(id) {
//clicking one of the horizontal nav buttons..
/*******************/
/* OnClick Effect  */
/*******************/
for (var i = 0; i < b.length; i++) {
    b[i].style.border = "thin solid #9ed3d2";						// reset them all back to their default style
	b[i].style.color = "black";	
	b[i].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	} 
	b[id].style.color = "red";
	b[id].style.border = "thin solid orange";											//change the style of the one we clicked!
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
  clicked = id;
}

function horizontal_nav_hover(id) {
	b[id].style.color = "red";
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
	b[id].style.border = "thin solid orange";
}

function horizontal_nav_out(id) {
  if(id != clicked){
	    b[id].style.color = "black";
	    b[id].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	    b[id].style.border = "thin solid #9ed3d2";
  }
}
.horizontal_nav_buttons {

	margin-left:10px;
	margin-top:3px;
	margin-right:-10px;
  
	background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
	border-radius:6px;
	height: 22px;
	border: thin solid #9ed3d2;
	
}
.Horizontal_Nav_Bar {
	
	background-color:#f1b5a8;
	border-radius: 25px 25px 25px 25px;
	height: 27px;
	/margin-top:2px;

}
<div class="Horizontal_Nav_Bar">
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)" onmouseover="horizontal_nav_hover(0)" onmouseout="horizontal_nav_out(0)">Link 1 </button>  
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)" onmouseover="horizontal_nav_hover(1)" onmouseout="horizontal_nav_out(1)">Link 2 Configuration</button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)" onmouseover="horizontal_nav_hover(2)" onmouseout="horizontal_nav_out(2)">Link 3 </button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)" onmouseover="horizontal_nav_hover(3)" onmouseout="horizontal_nav_out(3)">Link 4 </button>		</div>

答案 1 :(得分：2)

要添加到现有答案中，可以通过在脚本中设置className并依赖CSS来简化此操作：

var b = document.getElementsByClassName("horizontal_nav_buttons");

function horizontal_nav_on_click(id) {
  for (var i = 0; i < b.length; i++) {
    b[i].className = 'horizontal_nav_buttons';
  }

  b[id].className = 'horizontal_nav_buttons clicked';
}
.Horizontal_Nav_Bar {
  background-color: #f1b5a8;
  border-radius: 25px 25px 25px 25px;
  height: 27px;
  /margin-top: 2px;
}

.horizontal_nav_buttons {
  margin-left: 10px;
  margin-top: 3px;
  margin-right: -10px;
  border-radius: 6px;
  height: 22px;
  color: black;
  background: linear-gradient(to bottom, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%);
  border: thin solid #9ed3d";

}

.horizontal_nav_buttons:hover {
  color: red;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  border: thin solid orange;
}

.clicked {
  color: red;
  border: thin solid orange;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
}
<div class="Horizontal_Nav_Bar">
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)">Link 1 </button>
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)">Link 2 Configuration</button>
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)">Link 3 </button>
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)">Link 4 </button>

</div>

相关问题
最新问题