如果不是子元素，纯 CSS 可以在悬停时更改其他元素吗? [英] Can pure CSS change other element on hover if its not child element?

问题描述

css 是否包括在 hover 上更改其他元素的可能性.因为我有点为简单的任务而苦苦挣扎.对于此示例，我希望 form 在您悬停 时出现.标签.

Does css include possibility to change other element on hover. Because I'm kinda struggling with simple task. For this example, I want form to appear when you hover <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 应该是这样的:

Should css look something like this:

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

或:

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

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

It really drives me crazy :/ Any suggestions how I could make it work? I don't want to use javaScript if there is other way.

推荐答案

Write it as -

Write it as -

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

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

工作演示

这篇关于如果不是子元素，纯 CSS 可以在悬停时更改其他元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！