angularjs + css - покажите div hover, затем нажмите на кнопку hover, чтобы показать другой div - PullRequest
Новая
       30

angularjs + css - покажите div hover, затем нажмите на кнопку hover, чтобы показать другой div

0 голосов
/ 26 мая 2018

У меня есть изображение.,при наведении на изображение мне нужно показать кнопку «x» (наложение) при наведении курсора, а затем щелкнуть по значку «x» приведет к созданию нового div, который покроет все изображение (с переходом) (и под изображением) новым div с 2 кнопками ok и close.

наложение должно появиться снова, если я нажму кнопку "Отмена" и если мышь на изображении (потому что при наведении курсора)

Я использую угловой 1.6 + es6, mange для выполнения наведения, но невторая часть .я пытаюсь добиться этого с помощью CSS, если это возможно

мой код: 

<div class="thumbnail">

      <div ng-if="$ctrl.popupEvent === false" class="overlay">
            <div class="icon">
                <span class="fa fa-close" ng-click="$ctrl.popupEvent = true"></span>
            </div>
       </div>


    <div ng-if="$ctrl.popupEvent === true" class="popup-overlay" style="background: red;">
            <div class="icon-container">
                <span class="fa fa-ok" ng-click="$ctrl.ok();"></span>
                <span class="fa fa-close" ng-click="$ctrl.popupEvent = false;"></span>
            </div>
       </div>

</div>

css 

//image area
.thumbnail {

    position: relative;

    &:hover{
        .overlay{
           position: absolute;
          display: none;
          background: #erere;
          height: 100%;
          opacity: 0.9;
           width: 100%;
        }

    }
}

    .overlay {
        position: absolute;
        display: none;
        background: #erere;
        height: 100%;
        opacity: 0.9;
        width: 100%;
    }
...