在CSS

时间:2015-12-25 03:43:48

标签: html css css3

当鼠标悬停在div中时,是否可以切换删除按钮?我记得有人告诉我,不使用JS就可以了。

HTML

<div id="something">
    <button class="hide">delete</button>
</div>

CSS

#something:hover{

}

4 个答案:

答案 0 :(得分:26)

如果你像这样设置了hide(页面将显示为元素在那里但没有看到):

#something .hide{
    visibility: hidden;
}

你可以这样做,只是隐藏它:

#something:hover .hide{
    visibility: visible;
}

如果您已经像这样设置样式(页面将显示为元素不在那里):

#something .hide{
    display: none;
}
你可以这样做:

#something:hover .hide{
    display: block;
}

答案 1 :(得分:2)

在不知道如何设置控件样式的情况下,如果使用任何与css-js相关的库,则很可能在该类中定义了“ .hide”类,并且默认情况下将调用该类。该类将隐藏按钮,以便您进行操作使用JQuery或Javascript。

但是,如果您修改了代码,并且按钮的隐藏状态为display:none;用户将看到空白页面,不知道要在哪里悬停,因此您必须给他们一些悬停的东西:

Sol 1:

HTML:
<div id="something">
     Hover Here
    <button class="hides">delete</button>
</div>

CSS:
#something .hides{

    display:none;
}

#something:hover .hides{

    display:inline-block;
}

如果按钮的隐藏状态为 visibility:hidden ;这将隐藏按钮,但仍会在屏幕上保留其空间,因此会留下笨拙的界面,除非您喜欢使用样式。< / p>

Sol 2:

HTML:

<div id="something">
    <button class="hides">delete</button>
</div>

CSS:
#something{

    /*My fancy style;*/
}
#something .hides{

    visibility: hidden;
}

#something:hover .hides{

        visibility: visible;
}

答案 2 :(得分:0)

在你的情况下有两种状态,第一种是当鼠标from sklearn.linear_model import LinearRegression LR = LinearRegression() LR.fit(X1[:half], y1[:half]) R2_1 = LR.score(X1[half:],y1[half:]) LR.fit(X2[:half], y2[:half]) R2_2 = LR.score(X2[half:],y2[half:]) print R2_1, R2_2 0.912624422097 0.67247516054 当第二种情况不是因为hover

这里你必须在指针位于div上时定位元素leave,然后禁用可能发生的任何点击事件。

代码段

.hide

工作示例:

jsfiddle

欢呼声

答案 3 :(得分:-1)

//  hide element initially 

#something > .hide {
  display: none;
}

// display element on hover

#something:hover {
  .hide {
    display: inline;
  }
}