Html 如何为内部图像悬停编写css样式？

我正在尝试为div中的图像编写css样式，但它不起作用。我的示例代码在这里

<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:hover div img {
  display: block;
}

这将在实际父对象悬停时起作用，因为在您的示例中，子对象“移动”，失去其悬停状态

---

演示

.deviceimage:hover div img{
显示：块；
}

{{$index+1}}
您的浏览器不支持视频标记。

如果我理解正确，您不能以这种方式显示删除选项，因为它与图像不在同一级别

您应该将链接放在包含图像的div中。通过这种方式，您可以像上面那样显示它（为了简单起见，我清理了html）：

HTML:

JSFiddle：

---

试试看，如果有帮助就告诉我

我建议您编写一个自定义指令。这是在angular中进行DOM操作的最佳方法：

javascript:

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

---

我喜欢angular，但这种东西在jQuery中处理得很好

编写自定义指令，以便您可以在angular应用程序中访问jqlite。这是给你的链接：

---

[jQuery Plugin Directive-Youtube]

请在浏览器中提供生成的HTML。@VitorCanova这是提琴谢谢您的回复。这里我的意思是，若我将鼠标悬停在图像上，图像应该是可见的。首先是显示：可见模式由于这些图像是动态的，所以我想浏览一下父div设备图像

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

.delete {
    display: none;
}

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

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

.hidden {
    display:none;
}

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