4

css 是否包括更改hover. 因为我有点为简单的任务而苦苦挣扎。对于这个例子,我想form在你悬停时出现<a> tag

<a id="log" href="#">text</a>
      <form id="form" action="" method="post">
            <input type="text" name="id"/>
            <input type="submit" name="submit"/>  
      </form>

CSS应该看起来像这样:

#form{
    opacity:0;
}
#log:hover ~ #form {
    opacity: 1;
}

或者:

#log:hover + #form {
    opacity: 1;
}

这真的让我发疯:/有什么建议可以让它发挥作用吗?如果有其他方法,我不想使用 javaScript。

4

2 回答 2

8
#form {
  display: none;
}

#log:hover ~ #form {
  display:block;
}

#form:hover {
  display:block;
}

当您停止悬停链接时,您需要#form:hover使表单不会消失,但如果您使用的是触摸设备,这将不起作用。#log:active ~ #form可以联系,目前无法确认。

例如:http: //jsbin.com/etuxab/1/edit

于 2012-10-22T14:23:25.940 回答
5

写成——

#form{
    opacity:0;
    filter:alpha(opacity=0); /*For IE8*/
}

#log:hover ~ #form {
    opacity: 1;
    filter:alpha(opacity=100); /*For IE8*/
}

工作演示

于 2012-10-22T14:20:39.917 回答