Question

在我的网站上，如果您向下滚动到第三部分，其中包含＆＃34;胜利游戏＆＃34;并将鼠标悬停在左右箭头上，不显示任何文字。但是，第二次，然后将鼠标悬停在箭头上方，文本会正确显示。为什么他们第一次不工作？当您将鼠标悬停在文本＆＃34;胜利游戏＆＃34;

上时，这同样适用

在我的控制器中，我有：

projectApp.controller("featuredController", ["$rootScope", "$scope", function ($rootScope, $scope) {
    $scope.leftArrow = function(){
      $(function(){
        $(".left-arrow a").hover(function(){

          $('.left-info').css('opacity','1');

        }, function(){
           $('.left-info').css('opacity','0');

        });
      });
    };
    $scope.rightArrow = function(){
      $(function(){
        $(".right-arrow a").hover(function(){

          $('.right-info').css('opacity','1');

        }, function(){
           $('.right-info').css('opacity','0');

        });
      });
    };

$scope.bigWords = function(){

       $(function(){
  $(".big-word-padding").hover(
      function() {
    $('.blur-background').fadeOut(700);
    $('.big-word-padding').find('h2').css('color','blue');
    $('.color-blue').css('color','white');

  }, function() {
    $('.blur-background').fadeIn(300);
     $('.big-word-padding').find('h2').css('color','white');
     $('.color-blue').css('color','blue');

  });
    $(".big-word-padding").hover(
      function() {
    $('.blur-background').fadeOut(700);
    $('.big-word-padding').find('.m-title').css('color','white');
     $('.big-word-padding').find('#manga-title').addClass('textShadowM');
     $('.big-word-padding').find('.m-title').addClass('textShadowManga');
    $('.color-blue').css('color','white');

  }, function() {
    $('.blur-background').fadeIn(300);
     $('.big-word-padding').find('.m-title').css('color','rgb(26, 107, 156)');
$('.big-word-padding').find('#manga-title').removeClass('textShadowM');
     $('.big-word-padding').find('.m-title').removeClass('textShadowManga');
     $('.color-blue').css('color','blue');

  });
});
};
}]);

我的HTML：

<div class="ng-container" ng-controller="featuredController">
<div ng-view class="view-animate">

</div>
</div>

外部HTML文件（templates / featured-proj.html）：

  <div class="big-feature">
    <div class="big-background second-background"></div>
    <div class="blur-background second-background"></div>
    <div class="big-word">
      <div class="big-word-padding" ng-mouseover="bigWords()">
      <h2> Victorious <span class="color-blue">Gaming</span></h2>
      <h3>UI Developer. Design.</h3>
      <hr>
      <a href="http://league.victoriousgaming.com/landing" target="_blank"><i class="fa fa-caret-right fa-3x" aria-hidden="true" id="arrow-project"></i></a>
      </div>
    </div>
    <div class="left-arrow">
        <a href="#/feature3" ng-mouseover="leftArrow()"><i class="fa fa-angle-left" aria-hidden="true"></i></a>

    </div>
     <div class="left-info">
        My Art
      </div>
    <div class="right-arrow">
        <a href="#/feature2" ng-mouseover="rightArrow()"><i class="fa fa-angle-right" aria-hidden="true"></i></a>

    </div>
        <div class="right-info">
        Mangahere
      </div>
<!--      <ul class="nav navbar-nav navbar-right">
       <li><a href="#/feature"><i class="fa fa-shield"></i> Home</a></li>
        <li><a href="#/feature2"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#/feature3"><i class="fa fa-comment"></i> Contact</a></li>
      </ul> -->



      <div class="info-vic">
        <div class="row-vic">
            <div class="left-vic"></div>
            <div class="right-vic"></div>
        </div>
        <div class="row-vic">
            <div class="left-vic"></div>
            <div class="right-vic"></div>
        </div>
                <div class="row-vic">
            <div class="left-vic"></div>
            <div class="right-vic"></div>
        </div>
      </div>
  </div>

我的路由配置：

 projectApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/feature', {
        templateUrl : 'templates/featured-proj.html'
      })

      // route for the about page
      .when('/feature2', {
        templateUrl : 'templates/featured-proj-2.html'
      })

      // route for the contact page
      .when('/feature3', {
        templateUrl : 'templates/featured-proj-3.html'
      })
       .otherwise( { redirectTo: '/feature' } );
  }]);

Answer 1

首先，您在$(function(){ ... })和leftArrow()中都有一个额外的rightArrow()包装。

此外，只有在第一次调用这些函数时才会设置悬停效果。在该调用期间，不会修改不透明度。

我会将ng-mouseover="leftArrow()"替换为ng-mouseenter="leftArrowShow()" ng-mouseleave="leftArrowHide()"，然后将这些函数定义为：

$scope.leftArrowShow = function() {
    $('.left-info').addClass('show');
};
$scope.leftArrowHide = function() {
    $('.left-info').removeClass('show');
};

然后，在CSS中，有：

.left-info.show {
    opacity: 1;
}

rightArrow()将以类似的方式处理。

Angular：ngView和函数不能正常工作？

1 个答案: