Question

当鼠标悬停在http://codepen.io/Feners4/pen/KggAwg的立方体上时，如何让包裹中的所有元素改变颜色？目前，我只能在鼠标悬停的单侧进行更改。我想严格地使用Angular进行学习。

这是我的HTML：

JFileChooser fileChooser = new JFileChooser();
fileChooser.setDialogTitle("choose a file");
int userSelection = fileChooser.showSaveDialog(null);

if (userSelection == JFileChooser.APPROVE_OPTION) {
    File folder = fileChooser.getSelectedFile();
    String filepath = folder.getAbsolutePath();
    System.out.println("The path of the selected file is " + filepath);

    File f = null;
    boolean bool = false;

    try {      
       f = new File(folder.getPath());           
       bool = f.mkdirs();

       System.out.print("Directory created? " + bool);
    } catch(Exception e) {
       e.printStackTrace();
    }
}

这是我的JS：

<html>

<header>
  Angularity
</header>

<h1>hjskl</hi>

<body ng-app="App">
<div class="wrap">
    <div class="cube"change-background colorcode=¨#f45642¨>
        <div class="front" change-background>AAA</div>
        <div class="back" change-background></div>
        <div class="top" change-background></div>
        <div class="bottom" change-background></div>
        <div class="left" change-background></div>
        <div class="right" change-background></div>
    </div>
</div>

<div class="wrap2">
    <div class="cube2">
        <div class="front2" change-background colorcode=¨#f45642¨>AAA</div>
        <div class="back2" change-background ></div>
        <div class="top2" change-background></div>
        <div class="bottom2" change-background></div>
        <div class="left2" change-background></div>
        <div class="right2" change-background></div>
    </div>
</div>

</body>
</html>

Answer 1

执行此操作的一种方法是将您的指令添加到多维数据集方面的父级，然后在内部使用.children()将您的函数应用于每个子项。此外，您还希望您的班级change-color具有通用性，而不是:foo，否则CSS仍将仅适用于悬停元素，即使它们都具有该类。

<强> HTML

<div class="wrap">
    <div class="cube" change-background colorcode=¨#f45642¨>
        <div class="front" >AAA</div>
        <div class="back" ></div>
        <div class="top" ></div>
        <div class="bottom" ></div>
        <div class="left" ></div>
        <div class="right" ></div>
    </div>
</div>

<div class="wrap2">
    <div class="cube2" change-background>
        <div class="front2"  colorcode=¨#f45642¨>AAA</div>
        <div class="back2"></div>
        <div class="top2"></div>
        <div class="bottom2"></div>
        <div class="left2"></div>
        <div class="right2"></div>
    </div>
</div>

<强> JS

  link: function($scope, element, attr) {
    element.on('mouseenter', function() {
      element.children().addClass('change-color');
      element.children().css('background-color', $scope.colorcode);
    });
    element.on('mouseleave', function() {
      element.children().removeClass('change-color');
      element.children().css('background-color', '@red');
    });
  }

<强> CSS

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

Pen Example

使用鼠标悬停和Angular更改多个元素

1 个答案: