更新

Question

我在div中有一个图像，我想更改边框颜色。

html是

<div class="product-container">
  <a href="#"><img src="images/someimg.jpg"></a>
</div>

而css是

.product-container:hover .product-container img{ border:1px solid red; }

现在这不起作用。但是如果我做的话

.product-container:hover img{ border:1px solid red; }

然后它有效。现在我的问题是，在悬停产品 - 容器div时，任何img都会有相同的边框。我怎么能具体说明我想在产品容器div下面的那些图像上使用边框。

任何建议都受到高度赞赏。

Answer 1

要更改product-container div的直接子项图像的边框，则应使用 .product-container:hover > a > img{ border:1px solid red; }

a > img是必需的，因为img位于href内。这就是.product-container>img:hover无效的原因

.product-container:hover > a > img{ border:1px solid red; }

<div class="product-container">
  <a href="#"><img src="http://placehold.it/350x150"></a>
</div>

Answer 2

要说此规则仅适用于带有.product-container类的图像，您应该使用

itemdblclick

你有Ext.define('ExtApp.FilterPanel', { extend: 'Ext.Panel', alias: 'widget.GridFilterPanel', dock: 'top', collapsed:true, collapsible: true, cls: 'extfilter-panel', title: 'filters', initComponent: function () { var self = this if (metadataFunc.filtersMetainfo.HasFilter != null) { var myTabPanel = metadataFunc.tabPanel; self.items = myTabPanel; ExtApp.view.refBook.FilterPanel.superclass.initComponent.call(this); return; } }

表示悬停时类img.product-container:hover { border:1px solid red; }的任何内容和任何图片都应该有1 px红色边框

更新

我实际上误读了你需要img成为班级孩子的问题：它将是.product-container:hover img{ border:1px solid red; }

Onmouseover更改图像边框

2 个答案:

更新