使用CSS类 - Online Demo

Question

嗨，我知道有很多帖子都在问同样的问题，但是因为对我来说太复杂了解，因为我在css，js和html中使用了新词。

所以当我的页面加载时。悬停工作完美，然后当我点击一个选项...（做一些js代码）然后悬停不起作用。我想弄清楚为什么会这样。但我不知道。

这是一个简单的代码（请尽量不使用css3，html5和javascript之外的其他语言）...

<!DOCTYPE html>
<html>
<head>
</head>
<!--___________________STYLES-->
<style>
	body {
	padding: 0;
	margin: 0;
	background: gray;
	}
	a {
		text-decoration: none;
		color: black;
		background: white;
		display: block;
		width: 200px;
		font-size: 100px;
	}
		a:hover {
			color: white ;
			background: black ;
		}
	ul {
		list-style: none;
	}
	#parrafo {
		border: 1px dashed white;
		height: 1.2em;
	}

</style>

<!--___________________BODY-->
<body>
	<br/>
	<div id="d1">
		<ul>
			<li><a href="#" id="op1" onClick="SelectOp(this.id)">OP1</a></li>
			<li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a></li>
			<li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a></li>
			<li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a></li>
			<li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a></li>
		</ul>
		<br/>
		<p id="parrafo"></p>
	</div>
</body>

<!--___________________JAVSCRIPT-->
<script>

	
	
	function clearOP(par) {
		var i, n;
		
		n = document.getElementsByTagName('a').length;
		
		for (i=1; i<=n; i++) {
			document.getElementById('op'+i).style.color = 'black';
			document.getElementById('op'+i).style.background = 'white';
		}
	}
	
	function SelectOp(param) {
		var i, x;
		
		i=1;
		while (param != 'op'+i) {
			i++;
		}
		
		clearOP(param);
		document.getElementById('op'+i).style.color = 'white';
		document.getElementById('op'+i).style.background = 'black';
		
	}
</script>
</html>

Answer 1

使用脚本设置样式时，它会覆盖CSS悬停规则。

改为翻转课程。

我还对脚本进行了一些优化，无需使用所有代码。

<!DOCTYPE html>
<html>

<head>
</head>
<!--___________________STYLES-->
<style>
  body {
    padding: 0;
    margin: 0;
    background: gray;
  }
  a {
    text-decoration: none;
    color: black;
    background: white;
    display: block;
    width: 200px;
    font-size: 100px;
  }
  a:hover {
    color: white;
    background: black;
  }
  a.selected {                     /* added this class */
    color: white;
    background: black;
  }
  ul {
    list-style: none;
  }
  #parrafo {
    border: 1px dashed white;
    height: 1.2em;
  }
</style>

<!--___________________BODY-->

<body>
  <br/>
  <div id="d1" value="0">
    <ul>
      <li><a href="#" id="op1" class="selected" onClick="SelectOp(this.id)">OP1</a>
      </li>
      <li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a>
      </li>
      <li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a>
      </li>
      <li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a>
      </li>
      <li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a>
      </li>
    </ul>
    <br/>
    <p id="parrafo"></p>
  </div>
</body>

<!--___________________JAVSCRIPT-->
<script>

  function SelectOp(param) {
    document.querySelector('.selected').className = '';
    document.getElementById(param).className = 'selected';
  }
  
</script>

</html>

我还建议不要使用内联脚本，使用事件监听器，如本示例

var elems = document.querySelectorAll('#d1 a');   /*  find all anchor inside #d1         */

elems[0].className = 'selected';                  /*  set first as selected              */

for (var i = 0; i < elems.length; i++) {          /*  iterate all and add click handler  */
  elems[i].addEventListener('click', function(e) {
    document.querySelector('.selected').className = '';
    e.target.className = 'selected';
  })
}

body {
    padding: 0;
    margin: 0;
    background: gray;
  }
  a {
    text-decoration: none;
    color: black;
    background: white;
    display: block;
    width: 200px;
    font-size: 100px;
  }
  a:hover {
    color: white;
    background: #333;
  }
  a.selected {                     /* added this class */
    color: white;
    background: black;
  }
  ul {
    list-style: none;
  }
  #parrafo {
    border: 1px dashed white;
    height: 1.2em;
  }

<br/>
  <div id="d1" value="0">
    <ul>
      <li><a href="#" id="op1">OP1</a>
      </li>
      <li><a href="#" id="op2">OP2</a>
      </li>
      <li><a href="#" id="op3">OP3</a>
      </li>
      <li><a href="#" id="op4">OP4</a>
      </li>
      <li><a href="#" id="op5">OP5</a>
      </li>
    </ul>
    <br/>
    <p id="parrafo"></p>
  </div>

Answer 2

使用CSS类 - Online Demo

您可以切换css类，而不是直接设置颜色。

在css

中的a.selected旁边添加a:hover

a.selected,
a:hover {
    color: white;
    background: black;
}

简化您的代码以使其依赖于类

<script>
    SelectOp('op1');


    function clearOP() {
      var elements = document.getElementsByClassName('selected');
      for (var i = 0; i < elements.length; i++) {
        elements[i].className = '';
      };
    }

    function SelectOp(id) {
      clearOP();
      document.getElementById(id).className = 'selected';
    }
</script>

https://plnkr.co/edit/LzjkY8WIv8IF2P3YEGMk?p=preview

Answer 3

尝试以下

<!DOCTYPE html>
<html>

<head>
</head>
<!--___________________STYLES-->
<style>
  body {
    padding: 0;
    margin: 0;
    background: gray;
  }
  a {
    text-decoration: none;
    color: black;
    background: white;
    display: block;
    width: 200px;
    font-size: 20px;
  }
  a:hover {
    color: white;
    background: black;
  }
  ul {
    list-style: none;
  }
  #parrafo {
    border: 1px dashed white;
    height: 1.2em;
  }
  .op_active {
    background-color: black;
    color: white;
  }
</style>

<!--___________________BODY-->

<body onload="berep()">
  <br/>
  <div id="d1" value="0">
    <ul>
      <li><a href="#" id="op1" onClick="SelectOp(this.id)">OP1</a>
      </li>
      <li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a>
      </li>
      <li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a>
      </li>
      <li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a>
      </li>
      <li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a>
      </li>
    </ul>
    <br/>
    <p id="parrafo"></p>
  </div>
</body>

<!--___________________JAVSCRIPT-->
<script>
  function berep() {
    document.getElementById('op1').classList.add("op_active");
  }

  function clearOP(par) {
    var i, n;

    n = document.getElementsByTagName('a').length;

    for (i = 1; i <= n; i++) {
      var el = document.getElementById('op' + i);
      el.classList.remove("op_active");
    }
  }

  function SelectOp(param) {
    var i, x;

    i = 1;
    while (param != 'op' + i) {
      i++;
    }

    clearOP(param);
    var el = document.getElementById('op' + i);
    el.classList.add("op_active");
  }
</script>

</html>

Answer 4

这是因为您要直接在DOM中更改元素样式属性，而应使用这些类。请查看以下更新的代码段，希望它有所帮助。

<!DOCTYPE html>
<html>

<head>
</head>
<!--___________________STYLES-->
<style>
  body {
    padding: 0;
    margin: 0;
    background: gray;
  }
  a {
    text-decoration: none;
    color: black;
    background: white;
    display: block;
    width: 200px;
    font-size: 100px;
  }
  a:hover {
    color: white;
    background: black;
  }
  .white-black{
    color: white;
    background: black;
  }

  .black-white{
    color: black;
    background: white;
  }

  ul {
    list-style: none;
  }
  #parrafo {
    border: 1px dashed white;
    height: 1.2em;
  }
</style>

<!--___________________BODY-->

<body onload="berep()">
  <br/>
  <div id="d1" value="0">
    <ul>
      <li><a href="#" id="op1" onClick="SelectOp(this.id)">OP1</a>
      </li>
      <li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a>
      </li>
      <li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a>
      </li>
      <li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a>
      </li>
      <li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a>
      </li>
    </ul>
    <br/>
    <p id="parrafo"></p>
  </div>
</body>

<!--___________________JAVSCRIPT-->
<script>
  function berep() {
    document.getElementById('op1').className = "white-black"
  }

  function clearOP(par) {
    var i, n;

    n = document.getElementsByTagName('a').length;

    for (i = 1; i <= n; i++) {
     document.getElementById('op' + i).className = "black-white"
    }
  }

  function SelectOp(param) {
    var i, x;

    i = 1;
    while (param != 'op' + i) {
      i++;
    }

    clearOP(param);
  document.getElementById('op' + i).className = "white-black";
  }
</script>

</html>

Answer 5

如果您想更改所选元素的颜色和背景，我只是进行了修改。

if(par==i){
        i++;
        continue;
      }

只需在clearOP函数的循环

中添加上述if语句即可

<!--___________________JAVSCRIPT-->
<script>
  function berep() {
    document.getElementById('op1').style.color = 'white';
    document.getElementById('op1').style.background = 'black';
  }

  function clearOP(par) {
    var i, n;

    n = document.getElementsByTagName('a').length;

    for (i = 1; i <= n; i++) {
      console.log("Clear OP"+  i);
      if(par==i){
        i++;
        continue;
      }
      document.getElementById('op' + i).style.color = 'black';
      document.getElementById('op' + i).style.background = 'white';
    }
  }

  function SelectOp(param) {
    var i, x;

    i = 1;
    while (param != 'op' + i) {
      i++;
      console.log(i);
    }

    clearOP(param);
    document.getElementById('op' + i).style.color = 'white';
    document.getElementById('op' + i).style.background = 'black';
  }
</script>

＆＃13;

  function berep() {
    document.getElementById('op1').style.color = 'white';
    document.getElementById('op1').style.background = 'black';
  }

  function clearOP(par) {
    var i, n;

    n = document.getElementsByTagName('a').length;

    for (i = 1; i <= n; i++) {
      //console.log("Clear OP"+  i);
      if(par==i){
        i++;
        continue;
      }
      document.getElementById('op' + i).style.color = 'black';
      document.getElementById('op' + i).style.background = 'white';
    }
  }

  function SelectOp(param) {
    var i, x;

    i = 1;
    while (param != 'op' + i) {
      i++;
      //console.log(i);
    }

    clearOP(param);
    document.getElementById('op' + i).style.color = 'white';
    document.getElementById('op' + i).style.background = 'black';
  }

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>
<!--___________________STYLES-->
<style>
  body {
    padding: 0;
    margin: 0;
    background: gray;
  }
  a {
    text-decoration: none;
    color: black;
    background: white;
    display: block;
    width: 200px;
    font-size: 100px;
  }
  a:hover {
    color: white;
    background: black;
  }
  ul {
    list-style: none;
  }
  #parrafo {
    border: 1px dashed white;
    height: 1.2em;
  }
</style>

<!--___________________BODY-->

<body onload="berep()">
  <br/>
  <div id="d1" value="0">
    <ul>
      <li><a href="#" id="op1" onClick="SelectOp(this.id)">OP1</a>
      </li>
      <li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a>
      </li>
      <li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a>
      </li>
      <li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a>
      </li>
      <li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a>
      </li>
    </ul>
    <br/>
    <p id="parrafo"></p>
  </div>
</body>

＆＃13;

Answer 6

单击元素时，可以设置内联样式（对于单击的设置黑色背景，以及其他白色背景）。
点击后，所有元素都有内联样式。
内联样式的优先级高于选择器应用的样式（a或a：hover）。
这就是为什么你没有看到点击后的悬停样式，因为你已经有了内联样式。

在点击时为所有元素提供样式的尝试尝试以下方法：

创建一个名为＆＃34;选择＆＃34;：

的类

stdout

单击从所有元素中删除此类，然后为单击的元素设置类。

Answer 7

首先，感谢所有人帮助我完成基本菜单。我刚刚找到了解决你的答案的解决方案，这非常有帮助。现在我有一个明显最接近的想法css3，html5和Js如何工作。所以我通过@Jossef Harush找到了一个很好的解决方案，我只想和你分享我的代码。我还优化了一点我的代码。再次感谢！。

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<!--___________________STYLES-->
<style>
	body {
		padding: 0;
		margin: 0;
		background: gray;
	}
	a {
		text-decoration: none;
		color: black;
		background: white;
		display: block;
		width: 200px;
		font-size: 100px;
	}
		.selected,
		a:hover {
			color: white;
			background: black;
		}
	ul {
		list-style: none;
	}
	#parrafo {
		border: 1px dashed white;
		height: 1.2em;
	}
</style>

<!--___________________BODY-->
<body>
	<br/>
	<div id="d1">
		<ul>
			<li><a href="#" id="op1" onClick="SelectOp(this.id)">OP1</a></li>
			<li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a></li>
			<li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a></li>
			<li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a></li>
			<li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a></li>
		</ul>
		<br/>
		<p id="parrafo"></p>
	</div>
</body>

<!--___________________JAVSCRIPT-->
<script>
	var sel = '1';
	SelectOp('op1');
	
	function SelectOp(param) {
		document.getElementById('op'+sel).className = '';
		sel = param.charAt(2);
		document.getElementById(param).className = 'selected';
	}
</script>
</html>

＆＃13;

MENU：单击后悬停不起作用

7 个答案:

使用CSS类 - Online Demo

https://plnkr.co/edit/LzjkY8WIv8IF2P3YEGMk?p=preview