blocks|key|2824101|text|您可以使用position:absolute;检查演示，看看这是否是您想要的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2824102|对于html，可以使用clase+closed添加所需的图像(已关闭的图像)。|2824103|Html代码：|BOLD|2824104|<div+class="myDivClass">
++++<img+src="http://www.online-image-editor.com/styles/2013/images/example_image.png"+/>
++++<h2>Title</h2>
++++<img+class="closed"+src="http://i.stack.imgur.com/JlPAH.jpg"+/>
</div>|code-block|syntax|javascript|2824105|对于css，您需要添加:hover，并为您的closed类提供postion:absolute;和display:none;，以便在悬停div之前不会显示。|2824106|Css代码：|2824107|.myDivClass:hover+.closed{display:block;}++++
.closed+{+
+++++width:640px;+
+++++height:181px;+
+++++position:absolute;+
+++++top:100px;+
+++++display:none;
}|2824108|演示|2824109|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/R63tq/|1^0|5|I|P|2|0|0|H|6|0|0|7|0|0|B|6|M|6|V|H|1D|D|0|0|6|0|0|0|2|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@$9|1G|A|1H|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1I|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1S|8|@$9|1T|A|1U|B|J]]|D|@]|E|$]]|$1|T|3|U|5|M|7|1V|8|@]|D|@]|E|$N|O]]|$1|V|3|W|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|X|3|-4|5|6|7|20|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|14]]]]

<p>You could use <code>position:absolute;</code> Check the <strong><a href="http://jsfiddle.net/R63tq/" rel="nofollow">DEMO</a></strong> to see if this is what you want.</p>

<p>For the html, you can add the image you want (the closed image) with the clase <code>closed</code><br />
<strong>Html code:</strong></p>

<pre><code>&lt;div class="myDivClass"&gt;
    &lt;img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" /&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;img class="closed" src="http://i.stack.imgur.com/JlPAH.jpg" /&gt;
&lt;/div&gt;
</code></pre>

<p>For the css you need to add the <code>:hover</code> and give your image with the <code>closed</code> class a <code>postion:absolute;</code> and <code>display:none;</code> So it wont show until you hover the div. <br />
<strong>Css code:</strong> </p>

<pre><code>.myDivClass:hover .closed{display:block;}    
.closed { 
     width:640px; 
     height:181px; 
     position:absolute; 
     top:100px; 
     display:none;
}
</code></pre>

<p><strong><a href="http://jsfiddle.net/R63tq/" rel="nofollow">DEMO</a></strong></p>


blocks|key|2824128|text|div.MyDivClass+a:hover+{
+++background-image(closed+image+url);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2824129|这将对特定的div进行更改。当您为div设置类时，需要在CSS中调用div。您目前使用它的方式是.MyDivClass试图将它称为CssClass，而不是div类。|unstyled|2824130|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>div.MyDivClass a:hover {
   background-image(closed image url);
}
</code></pre>

<p>This will change it for the specific div.
When you set a class for a div you need to call div in CSS.
The way you are using it currently .MyDivClass is trying to call it as a CssClass, not a div class.</p>


blocks|key|1827361|text|您需要将图像定位在div中，方法是将div本身定位为相对位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1827362|演示：+http://jsfiddle.net/abhitalks/9GBUF/|BOLD|1827363|HTML|1827364|<div+class="myDivClass">
++++<img+class="baseimg"+src="...">
++++<img+class="overlay"+src="...">
++++
<h2>Title</h2>

</div>|code-block|syntax|javascript|1827365|CSS|1827366|div.myDivClass+{
++++position:+relative;
++++width:+128px;
}
div.myDivClass+img.overlay+{
++++position:+absolute;
++++top:+12%25;
++++left:+0px;
++++display:+none;
}
div.myDivClass:hover+img.overlay+{
++++display:+block;
}|1827367|更新：(在Op编辑之后)|1827368|如果您想使用伪元素来完成它，那么也需要对它进行定位。|1827369|演示2:+http://jsfiddle.net/abhitalks/Z93t7/1/|1827370|1827371|<div+class="myDivClass">
++++<img+class="baseimg"+src="...">
<h2>Title</h2>

</div>|1827372|1827373|div.myDivClass+{
++++position:+relative;
++++width:+128px;
}

div.myDivClass::before+{
++++content:+url(...);
++++position:+absolute;
++++top:+12%25;+left:+0px;
++++display:+none;
}

div.myDivClass:hover::before+{
++++display:+block;
}|1827374|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/abhitalks/9GBUF/|1|http://jsfiddle.net/abhitalks/Z93t7/1/^0|9|3|I|3|0|0|3|4|10|0|0|0|0|0|0|0|0|0|4|5|12|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1K|8|@$9|1L|A|1M|B|H]]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|I|3|J|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1R|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1S|8|@]|D|@]|E|$]]|$1|R|3|S|5|M|7|1T|8|@]|D|@]|E|$N|O]]|$1|T|3|U|5|6|7|1U|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1V|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1W|8|@$9|1X|A|1Y|B|H]]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|Z|3|J|5|6|7|22|8|@]|D|@]|E|$]]|$1|10|3|11|5|M|7|23|8|@]|D|@]|E|$N|O]]|$1|12|3|Q|5|6|7|24|8|@]|D|@]|E|$]]|$1|13|3|14|5|M|7|25|8|@]|D|@]|E|$N|O]]|$1|15|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]|1D|$5|18|19|1A|E|$1B|1E]]]]

<p>You need to position your images within the <code>div</code> by making the <code>div</code> itself as relatively positioned.</p>
<p><em><strong>Demo: <a href="http://jsfiddle.net/abhitalks/9GBUF/" rel="nofollow noreferrer">http://jsfiddle.net/abhitalks/9GBUF/</a></strong></em></p>
<p><em>HTML</em>:</p>
<pre><code>&lt;div class=&quot;myDivClass&quot;&gt;
    &lt;img class=&quot;baseimg&quot; src=&quot;...&quot;&gt;
    &lt;img class=&quot;overlay&quot; src=&quot;...&quot;&gt;
    
&lt;h2&gt;Title&lt;/h2&gt;

&lt;/div&gt;
</code></pre>
<p><em>CSS</em>:</p>
<pre><code>div.myDivClass {
    position: relative;
    width: 128px;
}
div.myDivClass img.overlay {
    position: absolute;
    top: 12%;
    left: 0px;
    display: none;
}
div.myDivClass:hover img.overlay {
    display: block;
}
</code></pre>
<hr />
<h2>Update: (After Op's Edit)</h2>
<p>If you want to do it using a pseudo-element, then also you need to position it.</p>
<p><em><strong>Demo 2: <a href="http://jsfiddle.net/abhitalks/Z93t7/1/" rel="nofollow noreferrer">http://jsfiddle.net/abhitalks/Z93t7/1/</a></strong></em></p>
<p><em>HTML</em>:</p>
<pre><code>&lt;div class=&quot;myDivClass&quot;&gt;
    &lt;img class=&quot;baseimg&quot; src=&quot;...&quot;&gt;
&lt;h2&gt;Title&lt;/h2&gt;

&lt;/div&gt;
</code></pre>
<p><em>CSS</em>:</p>
<pre><code>div.myDivClass {
    position: relative;
    width: 128px;
}

div.myDivClass::before {
    content: url(...);
    position: absolute;
    top: 12%; left: 0px;
    display: none;
}

div.myDivClass:hover::before {
    display: block;
}
</code></pre>


blocks|key|1827398|text|更正hover的css代码|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1827399|div.myDivClass:hover
{
background-image:url(closed+image+url);
}|code-block|syntax|javascript|1827400|content:url(closed+image+url);，您需要用background-image替换content。|1827401|entityMap^0|2|5|0|0|0|U|Z|G|1H|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>Correct your css code for <code>hover</code></p>

<pre><code>div.myDivClass:hover
{
background-image:url(closed image url);
}
</code></pre>

<p><code>content:url(closed image url);</code>,  you need to replace <code>content</code> with <code>background-image</code>.</p>


blocks|key|1827422|text|我的决定|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1827423|1827424|<a+class="demo"+href="#">
<img+class="raz"+src="http://myubuntu.ru/images/12/mac-rename-title.jpg"+/>
<img+class="dva"+src="http://myubuntu.ru/cache/multithumb_thumbs/b_675_675_16777215_10_images_12_mac-scrollbars.jpg"+/>
</a>|code-block|syntax|javascript|1827425|CSS|offset|length|style|BOLD|1827426|.demo+{+
++++position:relative;+
++++margin:0+auto;+
++++height:+400px;
++++width:400px;
++++display:+block;
}

++.demo+img+{+
++++left:+0;+
++++position:absolute;+
++++top:+0;+
}

++.demo+img.raz+{opacity:0;filter:alpha(opacity=0);}
++.demo:hover+img.raz+{opacity:1;filter:alpha(opacity=100);}
++.demo:hover+img.dva,+.demo+img.dva:hover+{opacity:0;filter:alpha(opacity=0);}|1827427|现场演示|1827428|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/FeEsx^0|0|0|0|0|3|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|11|8|@]|9|@]|A|$F|G]]|$1|H|3|I|5|6|7|12|8|@$J|13|K|14|L|M]]|9|@]|A|$]]|$1|N|3|O|5|E|7|15|8|@]|9|@]|A|$F|G]]|$1|P|3|Q|5|6|7|16|8|@]|9|@$J|17|K|18|1|19]]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>my decision</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;a class="demo" href="#"&gt;
&lt;img class="raz" src="http://myubuntu.ru/images/12/mac-rename-title.jpg" /&gt;
&lt;img class="dva" src="http://myubuntu.ru/cache/multithumb_thumbs/b_675_675_16777215_10_images_12_mac-scrollbars.jpg" /&gt;
&lt;/a&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.demo { 
    position:relative; 
    margin:0 auto; 
    height: 400px;
    width:400px;
    display: block;
}

  .demo img { 
    left: 0; 
    position:absolute; 
    top: 0; 
}

  .demo img.raz {opacity:0;filter:alpha(opacity=0);}
  .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
  .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
</code></pre>

<p><a href="http://codepen.io/anon/pen/FeEsx" rel="nofollow">live demo</a></p>


blocks|key|2824251|text|.imgBox+{宽度:191+no；高度:191+no；背景:+url(http://www.corelangs.com/css/box/img/duck.png)不重复；}+.imgBox:hover+{宽度:191+no；高度:191+no；背景:+url(http://www.corelangs.com/css/box/img/peng.png)不重复；}-参见：http://www.corelangs.com/css/box/hover.html#sthash.6X5XZ7k5.dpuf|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2824252|entityMap|0|LINK|mutability|MUTABLE|url|http://www.corelangs.com/css/box/img/duck.png|1|http://www.corelangs.com/css/box/img/peng.png|2|http://www.corelangs.com/css/box/hover.html#sthash.6X5XZ7k5.dpuf^0|11|19|0|3O|19|1|57|1S|2|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]|N|$5|G|H|I|C|$J|O]]]]

<p>    .imgBox { width: 191px; height: 191px; background: url(<a href="http://www.corelangs.com/css/box/img/duck.png" rel="nofollow">http://www.corelangs.com/css/box/img/duck.png</a>) no-repeat; } .imgBox:hover { width: 191px; height: 191px; background: url(<a href="http://www.corelangs.com/css/box/img/peng.png" rel="nofollow">http://www.corelangs.com/css/box/img/peng.png</a>) no-repeat; }        - See more at: <a href="http://www.corelangs.com/css/box/hover.html#sthash.6X5XZ7k5.dpuf" rel="nofollow">http://www.corelangs.com/css/box/hover.html#sthash.6X5XZ7k5.dpuf</a></p>


<p>I am doing some css stuff,</p>

<p>Now I have a div tag slimier to this.</p>

<pre><code>&lt;div class="myDivClass"&gt;
&lt;img src="some image url"&gt;
&lt;h2&gt;Title&lt;/h2&gt;
&lt;/div&gt;
</code></pre>

<p>Now I need to add hover to that div class. What I need to do is When mouse over happening Another image should appear on top of that image,</p>

<p>ie. <img src="https://i.stack.imgur.com/JlPAH.jpg" alt="enter image description here"></p>

<p>But both of them should be displayed and closed image should only appear when mouse over.</p>

<p>CSS :</p>

<pre><code>.myDivClass:hover{

  content:url(closed image url);

}
</code></pre>

<p>Thanks in advanced..!</p>


how to set image to a div on mouse over on top of everything?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在做一些css的事情，现在我有个div标签更脏。<div class="myDivClass"><img src="some image url"><h2>Title</h2></div>现在我需要将悬浮添加到div类中。我需要做的是，当鼠标移动到另一个图像上时，即。​但是两者都应该显示，封闭的图像应该只出现在鼠标结...

问如何将图像设置为鼠标上方的div？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将图像设置为鼠标上方的div？EN