javascript - 从 Css 调用 Javascript

Question

这是我正在开发的网站上的菜单图片。我试图做到这一点，当有人将鼠标悬停在列表项上时:风、水或火，他们的背景会随机改变颜色。

例如悬停在 Wind 上:

我正在尝试专门使用 Javascript、CSS 和 HTML 来执行此操作。

相关代码:

[class*="Starsignpica-"] {
display: block; 
color: black; 
text-decoration: none; 
padding-left: 8px; 
text-align: left; 
line-height: 200%; 
<!--border:1px solid red;-->
height: 30px; 
background-color: white;
box-shadow: 1px 1px 5px #FFFFFFF;
}

ul.menu1 a.Starsignpica-1{
background-image: url('wind1.jpg');
background-size: 30px 32px; 
background-repeat: no-repeat; 
background-position: 100% 100%
}

ul.menu1 a.Starsignpica-2{
background-image: url('wind1.jpg');
background-size: 30px 32px; 
background-repeat: no-repeat; 
background-position: 100% 100%
}

ul.menu1 a.Starsignpica-3{
background-image: url('wind1.jpg');
background-size: 30px 32px; 
background-repeat: no-repeat; 
background-position: 100% 100%
}

[class*="Starsignpica-"]:hover {
onmouseover ="onmousetop()"; 
background-color: green;
}

<script>

function mouseontop(){
alert("hello"); 
}

</script>

Answer 1

不，您不能从您的 css 调用 javascript。但是，您可以为每个元素添加一个事件监听器，以将背景颜色设置为随机值。

Js fiddle 示例:http://jsbin.com/lodomaregi/edit?html,css,js,output

鉴于您有一个要使用的元素，您可以使用 .addEventListener 函数简单地添加一个事件监听器，如下所示:

// Event handler for mouseover to assign random background color.
myElement.addEventListener('mouseover', function(e) {

  // Sets the current target's (element) background color to green.
  e.target.style.backgroundColor = 'green';
})

针对您的问题的建议解决方案。

// Fetch all elements with the 'menu1' class name.
var elements = document.getElementsByClassName('menu1');

// Loop through the elements and add event listeners for each element
for(var i = 0; i < elements.length; i++) {

  // Event handler for mouseover to assign random background color.
  elements[i].addEventListener('mouseover', function(e) {

    // Assign backgroundColor with random color
    e.target.style.backgroundColor = getRandomColor();
  })

  // Event handler for mouseout to reset the background color.
  elements[i].addEventListener('mouseout', function(e) {

    // Reset background color by assigning it an empty string.
    e.target.style.backgroundColor = '';
  })
}

// Function for getting a random color
function getRandomColor() {
  // List of colors which can be returned by the function.
  var colors = [
    'lightgreen',
    'pink',
    'yellow',
    'blue',
    'purple',
    '#ff0000',
    '#c9c9c9'
  ];

  // Fetch random int value.
  var index = getRandomInt(0, colors.length - 1);

  // Return the color from the colors array using the generated index value.
  return colors[index];
}

// Function for generating a random int value. Taken from: 
// http://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}