blocks|key|4131938|text|问题是，一旦您不再将鼠标悬停在.upload-media+div上，CSS+:hover选择器就不再有效。您可以使用jQuery的$().hover()函数和它的$().css()函数来更改类的CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4131939|​|4131940|.upload-image+{
++++width:+50px;
++++height:+50px;
++++background:+#333;
++++border-radius:+25px;
++++position:+absolute;
++++left:+0;
++++top:+0;
++++cursor:+pointer;
++++-webkit-transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++-moz-transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++-o-transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++z-index:+-3000;
++
}

/*.upload-media:hover+.upload-image+{
++++-webkit-transform:+translate(40px,-45px);
++++-moz-transform:+translate(40px,-45px);
++++-o-transform:+translate(40px,+-45px);
++++-ms-transform:+translate(40px,-45px);
++++transform:+translate(40px,-45px);
}*/
++++


.upload-media+{

++++width:+50px;
++++height:+50px;
++++background:+#ff5fa7;
++++border-radius:+25px;
++++-webkit-box-shadow:+0px+0px+31px+0px+rgba(0,0,0,0.35);
++++-moz-box-shadow:+0px+0px+31px+0px+rgba(0,0,0,0.35);
++++box-shadow:+0px+0px+31px+0px+rgba(0,0,0,0.35);
++++left:+50%25;
++++top:50px;
++++position:+relative;
}

++++.upload-media::after+{
++++++++content:+"+";
++++++++position:+absolute;
++++++++display:+block;
++++++++background-color:+#fff;
++++++++height:+4px;
++++++++margin-top:+-2px;
++++++++top:+50%25;
++++++++left:15px;
++++++++right:15px;
++++++++z-index:+9;
++++++++border-radius:+5px;
++++}
++++.upload-media::before+{
++++++++content:+"+";
++++++++position:+absolute;
++++++++display:+block;
++++++++background-color:+#fff;
++++++++width:+4px;
++++++++margin-left:+-2px;
++++++++left:+50%25;
++++++++top:+15px;
++++++++bottom:+15px;
++++++++z-index:+9;
++++++++border-radius:+5px;
++++}|code-block|syntax|javascript|4131941|<div+class="upload-media">
++<div+class="upload-image">
++</div>
</div>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.upload-media').hover(function(){
++$('.upload-image').css('transform','translate(40px,-45px)');
});
</script>|4131942|4131943|纯Javascript方法(为mouseover添加一个事件监听器，并在upload-image悬停时向upload-media添加一个类)：|4131944|4131945|.upload-image+{
++++width:+50px;
++++height:+50px;
++++background:+#333;
++++border-radius:+25px;
++++position:+absolute;
++++left:+0;
++++top:+0;
++++cursor:+pointer;
++++-webkit-transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++-moz-transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++-o-transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++transition:+0.2s+cubic-bezier(0.22,+0.61,+0.36,+1);
++++z-index:+-3000;
++
}

.upload-image-visible+{
++++-webkit-transform:+translate(40px,-45px);
++++-moz-transform:+translate(40px,-45px);
++++-o-transform:+translate(40px,+-45px);
++++-ms-transform:+translate(40px,-45px);
++++transform:+translate(40px,-45px);
}
++++


.upload-media+{

++++width:+50px;
++++height:+50px;
++++background:+#ff5fa7;
++++border-radius:+25px;
++++-webkit-box-shadow:+0px+0px+31px+0px+rgba(0,0,0,0.35);
++++-moz-box-shadow:+0px+0px+31px+0px+rgba(0,0,0,0.35);
++++box-shadow:+0px+0px+31px+0px+rgba(0,0,0,0.35);
++++left:+50%25;
++++top:50px;
++++position:+relative;
}

++++.upload-media::after+{
++++++++content:+"+";
++++++++position:+absolute;
++++++++display:+block;
++++++++background-color:+#fff;
++++++++height:+4px;
++++++++margin-top:+-2px;
++++++++top:+50%25;
++++++++left:15px;
++++++++right:15px;
++++++++z-index:+9;
++++++++border-radius:+5px;
++++}
++++.upload-media::before+{
++++++++content:+"+";
++++++++position:+absolute;
++++++++display:+block;
++++++++background-color:+#fff;
++++++++width:+4px;
++++++++margin-left:+-2px;
++++++++left:+50%25;
++++++++top:+15px;
++++++++bottom:+15px;
++++++++z-index:+9;
++++++++border-radius:+5px;
++++}|4131946|<div+class="upload-media">
++<div+class="upload-image">
++</div>
</div>
<script>
document.getElementsByClassName("upload-media")[0].addEventListener("mouseover",+function(){
document.getElementsByClassName("upload-image")[0].classList.add("upload-image-visible");
});
</script>|4131947|4131948|entityMap^0|F|D|T|3|12|6|1T|B|29|9|0|0|0|0|0|F|9|10|C|1G|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|R|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1O|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|Y|$]]

<p>The problem is that as soon as you are no longer, hovering over the <code>.upload-media</code> <code>div</code>, the CSS <code>:hover</code> selector no longer has effect. You can use jQuery's <code>$().hover()</code> function and its <code>$().css()</code> function to change the CSS of a class.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

/*.upload-media:hover .upload-image {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}*/
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="upload-media"&gt;
  &lt;div class="upload-image"&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$('.upload-media').hover(function(){
  $('.upload-image').css('transform','translate(40px,-45px)');
});
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Pure Javascript method (adding an event listener for <code>mouseover</code> and adding a class to <code>upload-image</code> when <code>upload-media</code> is hovered over):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

.upload-image-visible {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="upload-media"&gt;
  &lt;div class="upload-image"&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
document.getElementsByClassName("upload-media")[0].addEventListener("mouseover", function(){
document.getElementsByClassName("upload-image")[0].classList.add("upload-image-visible");
});
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I am having trouble with this menu, i am hoping someone can help me.</p>

<p>I have a div, which is hoverable and i am trying to let it show several (altough only one in this example) menu options. But as soon as cursor leaves the main btn, the menu collapses back.</p>

<p>Can someone help?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

.upload-media:hover .upload-image {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="upload-media"&gt;
  &lt;div class="upload-image"&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://codepen.io/anon/pen/mjJQzo" rel="nofollow noreferrer">https://codepen.io/anon/pen/mjJQzo</a></p>


CSS popout menu

jQuery

我看不懂这份菜单，希望有人能帮我。我有一个div，它是悬停的，我试图让它显示几个菜单选项(尽管在这个例子中只有一个)。但是一旦光标离开主btn，菜单就会折叠回来。有人能帮帮忙吗？​.upload-image {    width: 50px;    height: 50px;    background: #333; ...

问CSS弹出菜单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS弹出菜单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS弹出菜单
EN