Как написать стиль css для внутреннего изображения?

Question

Я пытаюсь написать стиль css для изображения внутри div, но он не работает. Мой пример кода здесь

<div id="{{$index + 1}}" class="DeviceImages" droppable >  
    <p class="backgroundText"> 
     {{$index + 1}} 
    </p> 
    <a class='imagedelete delete' href="#"> 
     <span class="glyphicon glyphicon-remove-circle"></span> 
    </a> 
    <div 
     ng-if="slotIdVsFile[$index + 1]" 
     class="deviceimage" 
     id="{{slotIdVsFile[$index + 1].name}}" 
     draggable="true" 
     draggable 
    > 
     <img 
      ng-if="slotIdVsFile[$index + 1].fileType == 1" 
      src="{{slotIdVsFile[$index + 1].url}}" 
      class="hoverimages" 
     /> 
     <video 
      ng-if="slotIdVsFile[$index + 1].fileType == 2" 
      class="hoverimages ImageFiles" 
      controls 
     > 
      <source ng-src="{{slotIdVsFile[$index + 1].url}}" type="video/mp4"> 
       Your browser does not support the video tag. 
     </video> 
    </div> 
</div> 

Здесь я пытаюсь как если мышь над на изображение внутри DeviceImages, затем удалить должны быть видны.

.DeviceImages div img:hover { 
    display:block; 
} 

Но я не получаю

Answer 1

Изменить селектор в:

.DeviceImages:hover div img { 
    display: block; 
} 

, который будет работать, когда фактический родитель колебались, так как в вашем образце ребенок «движется», теряя его зависание.

---

Demo

.DeviceImages:hover div img { 
 
    display: block; 
 
}

<div id="{{$index + 1}}" class="DeviceImages" droppable> 
 
    <p class="backgroundText"> 
 
    {{$index + 1}}</p> <a class='imagedelete delete' href="#"><span class="glyphicon glyphicon-remove-circle"></span></a> 
 
    <div ng-if="slotIdVsFile[$index + 1]" class="deviceimage" id="{{slotIdVsFile[$index + 1].name}}" draggable="true" draggable> 
 
    <img ng-if="slotIdVsFile[$index + 1].fileType == 1" src="{{slotIdVsFile[$index + 1].url}}" class="hoverimages" /> 
 
    <video ng-if="slotIdVsFile[$index + 1].fileType == 2" class="hoverimages ImageFiles" controls> 
 
     <source ng-src="{{slotIdVsFile[$index + 1].url}}" type="video/mp4"> 
 
     Your browser does not support the video tag. 
 
    </video> 
 
    </div> 
 
</div>

Answer 2

Если я правильно понял, вы не можете показать опцию удаления таким способом, потому что это не на том же уровне, что и изображение.

Вы должны поместить свою ссылку в div, содержащий изображение. Таким образом, вы можете показать, как выше (я убирала HTML для простоты):

HTML:

<div class="DeviceImages" droppable> 
    <div class="deviceimage" draggable="true" draggable> 
     <img class="hoverimages" /> 
     <a class='imagedelete delete' href="#">delete</a> 
    </div> 
</div> 

CSS:

.delete { 
    display: none; 
} 

.deviceimage img:hover ~ .delete { 
    display: inline-block; 
} 

JSFiddle: http://jsfiddle.net/mL62e0mc/2/

Попробуйте и дайте мне знать, если это поможет!

Answer 3

Я предлагаю вам написать специальную директиву. Это лучше всего подходит для манипулирования DOM в угловую: Fiddle

<div ng-app="app"> <span mouse-over>Hover me</span> 
<span class="hidden">Delete me</span> 
</div> 

CSS:

.hidden { 
    display:none; 
} 

JavaScript:

var app=angular.module("app", []); 
    app.directive('mouseOver', function() { 
     return { 
      link: function($scope, element, attr){ 
       element.on("mouseover", function() { 
        element.next().removeClass('hidden'); 
      }); 
     } 
    }; 
    }); 

Answer 4

Я люблю угловатый, но такого рода вещи действительно обработаны хорошо в JQuery ,

Напишите пользовательскую директиву, чтобы вы могли получить доступ к jqlite в своем угловом приложении. Вот ссылка для тебя:

[Jquery Plugin Directive - Youtube] https://www.youtube.com/watch?v=9Bu73oQQSio