Question

我是HTML / CSS的新手，想要使用html / angular js创建电影应用程序。用户可以看到电影列表。电影详细信息将从服务器获取。

当用户将鼠标悬停在电影图像上时，它应该在该图像上显示具有不同选项的菜单以播放电影（例如在媒体播放器，浏览器中播放......）

我试过在css中为li标签设置background-image，但是对于所有li标签都会显示相同的图像，在我的情况下，电影列表将是动态生成的，不应该在css文件中硬编码。它应该如下所示

enter image description here

通过以下方式尝试

我尝试通过以下方式对单张图像进行了正常工作但是当我使用ng-repeat尝试多张图像时，当我将鼠标悬停在单张图像上时，它会显示所有图像的选项，似乎我正在以工作方式进行，请帮忙。下面是伪代码。 css文件

#frame_wrapper {
            display: inline-block;
            position: relative;
            width: 150px;
            height: 150px;
            z-index: 0;
            border: 1px solid #999999;
        }
        .movie_image {
            display: block;
            margin: 0;
            padding: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: red;

        }
        #movie_option {
            display: none;
            margin: 0;
            padding: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(255, 0, 0, 0.7);;
        }
        #frame_wrapper:hover #movie_option {
            display: block;
        }

<div id="frame_wrapper" ng-controller="AppController">
    <div class="movie_image">
    <ul>;
        <li data-ng-repeat="movie in movies | orderBy:'name':true">
            <a href="#"><img data-ng-src="{{movie.thumb}}"></a>
            <div id="MovieTitle">{{movie.name | uppercase}}</div>
            <div id="movie_option">
                <nav>
                    <ul style="background: green">
                        <li>
                            <a href="">PLAY    | <span class="caret"></span>
                            </a>;
                            <div>
                                <ul>
                                    <li><a href="">Play locally</a></li>
                                    <li><a href="">Play on webpage</a></li>
                                    <li><a href="">Play on media player</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </li>
    </ul>
    </div>

Answer 1

<强>已更新

 <ul class="movie_list">
  <li class="movie_image" data-ng-repeat="movie in movies | orderBy:'name':true">
      <a href="#"><img data-ng-src="{{movie.thumb}}" /></a>
            <div class="MovieTitle">{{movie.name | uppercase}}</div>
            <div class="movie_option">
                    <ul style="background: green">
                            <li>
                                    <a href="#">PLAY    | <span class="caret"></span></a>
                                    <div>
                                            <ul>
                                                    <li><a href="#">Play locally</a></li>
                                                    <li><a href="#">Play on webpage</a></li>
                                                    <li><a href="#">Play on media player</a></li>
                                            </ul>
                                    </div>
                            </li>
                    </ul>
            </div>
  </li>
  <li class="movie_image" data-ng-repeat="movie in movies | orderBy:'name':true">
      <a href="#"><img data-ng-src="{{movie.thumb}}" /></a>
            <div class="MovieTitle">{{movie.name | uppercase}}</div>
            <div class="movie_option">
                    <ul style="background: green">
                            <li>
                                    <a href="#">PLAY    | <span class="caret"></span></a>
                                    <div>
                                            <ul>
                                                    <li><a href="#">Play locally</a></li>
                                                    <li><a href="#">Play on webpage</a></li>
                                                    <li><a href="#">Play on media player</a></li>
                                            </ul>
                                    </div>
                            </li>
                    </ul>
            </div>
  </li>
  <li class="movie_image" data-ng-repeat="movie in movies | orderBy:'name':true">
      <a href="#"><img data-ng-src="{{movie.thumb}}" /></a>
            <div class="MovieTitle">{{movie.name | uppercase}}</div>
            <div class="movie_option">
                    <ul style="background: green">
                            <li>
                                    <a href="#">PLAY    | <span class="caret"></span></a>
                                    <div>
                                            <ul>
                                                    <li><a href="#">Play locally</a></li>
                                                    <li><a href="#">Play on webpage</a></li>
                                                    <li><a href="#">Play on media player</a></li>
                                            </ul>
                                    </div>
                            </li>
                    </ul>
            </div>
  </li>

使用Javascript：

$(document).ready(function() {
  $('.movie_image').hover(
  function() {
    $('.movie_option', this).addClass('active');
  }, function() {
    $('.movie_option', this).removeClass('active');
  });
});

的CSS：

ul.movie_list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

li.movie_image {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 180px;
  width: 200px;
  position: relative;
  float: left;
}

.movie_option ul {
  list-style: none;
}

.movie_option ul, .movie_option ul li {
  margin: 0;
  padding: 0;
  height: 100%;   
}

.movie_option {
  display: none;
  margin: 0;
  padding: 0;
  background-color: yellow;
  height: 100%;
  width: 100%;
  position: absolute;   
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.7);
}

.active {
  display: block;
}

示例：

https://jsfiddle.net/michaelyuen/3z5cbu3f/

Answer 2

我会使用带有所有标记的隐藏div来制作菜单，并使用Javascript显示和隐藏它。查看 OnMouseOver 事件。

但是，请考虑触摸屏设备的可用性或缺乏性。这些往往与“鼠标悬停”事件斗争。

Answer 3

我想如果你想使用角度的最佳选择是使用ui-bootstrap 落下。你可以使用这样的结构

<div class="movie>
    <img src="path_to_img">
    <div class="menu">
        <!-- MENU MARKUP -->
    </div>
</div>

和CSS

.menu{
   display:none;
}

.movie:hover .menu{
    display:block;
}

如果你想让它具有响应性，你还需要在mobie上显示它。

整个元素应该作为角度指令。

鼠标悬停在html中的图像上的菜单选项

3 个答案: