Question

我正在尝试为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内的图像上，然后删除应该是可见的。

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

但我没有得到

Answer 1

将您的选择器更改为：

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

当实际的父母被徘徊时会起作用，因为在你的样本中孩子'移动'，失去了它的悬停状态。

<强>演示

.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

我建议你写一个自定义指令。对于角度为Fiddle

的DOM操作，这是最好的

<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。这是ya的链接：

[jQuery插件指令 - Youtube] https://www.youtube.com/watch?v=9Bu73oQQSio

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

4 个答案: