CODEWITHSUNDEEP
csshtmlimage
Rajesh Kapure
Rajesh Kapure

Reputation: 65

menu option on image on mouse hover in html

I'm new in HTML/CSS and want to create movie application using html/angular js. where user can see list of movies. movie details will be fetch from server.

when user hover the mouse on movie image, it should show menu on that image with different options to play the movie (e.g. play in media player, browser, ...)

I have tried by setting background-image in css for li tag but that will display same image for all li tag, in my case movie list will be dynamic generated and should not hardcoded in css file. it should look like below

enter image description here

Tried by below way

I tried by below way it was working fine for single image but when I tried multiple images using ng-repeat, it shows options for all images when I hover mouse on single image, seems that I'm doing in working way, please help. below is pseudocode. css file

#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>

Upvotes: 0

Views: 1756

Answers (3)

Michael Eugene Yuen
Michael Eugene Yuen

Reputation: 2528

UPDATED

 <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;
}

Example:

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

Upvotes: 1

Mateutek
Mateutek

Reputation: 184

I guess the best option if you want to use the angular is to use ui-bootstrap dropdown. You can use such structure

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

and on CSS

.menu{
   display:none;
}

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

still you need to show it on mobie if you want to have it responsive friendly.

Whole element should work as a angular directive.

Upvotes: 0

Paul
Paul

Reputation: 1208

I would use a hidden div with all the markup to make the menu, and show and hide that with Javascript. Look at the OnMouseOver event.

However, please consider the useability - or lack of - on touch screen devices. These tend to struggle with "mouse over" events.

Upvotes: 0

Related Questions