我有一个菜单和三个隐藏的div显示取决于用户选择的选项.我想仅使用CSS显示/隐藏它们.我现在正在使用jquery,但是我希望它可以在禁用js的情况下访问.有人在这里为其他人提供了这个代码,但它只适用于div:hover或div:active,当我将其更改为div时:访问它不起作用.我需要添加一些东西,或者这可能不是正确的方法吗？我感谢任何帮助:)
事情是我的客户希望这个特定的div在选择菜单时滑动/淡出,但我仍然希望它们在关闭javascript时正确显示.也许z-index可以做到这一点......？
我在localhost上运行Drupal 7.4,我已经下载了一些主题/模块,但是我无法安装它们.我去管理/模块,例如,选择'上传模块或主题存档进行安装',从我的文件系统中选择tar.gz,并在安装之前我被要求提供FTP用户和密码而无法提前.
我在本地工作,所以我想也许我在安装过程中犯了一些错误.我怎么能纠正这个？在将站点移动到服务器之前,我必须在本地进行大量测试.
我有以下html:
<div id="main">
<div id="home" class="section">
<ul>
<li class="home_li"><a href="#home" class="goto_home">Home</a></li>
<li class="about_li"><a href="#about" class="goto_about">About us</a></li>
<li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li>
</ul>
</div> <!-- End home -->
<div id="nav">
<ul>
<li class="home_li"><a href="#home" class="goto_home"></a></li>
<li class="about_li"><a href="#about" class="goto_about"></a></li>
<li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li>
</ul>
</div> <!-- End nav -->
</div> <!-- End main -->
我正在尝试做的是在一个人被徘徊时改变两个链接的状态.例如,如果我将鼠标悬停在'about'下,<div id="home">我希望两个链接,即一个和下一个链接,<div id="nav">以不透明度显示.
如果可能的话,我正试图远离JS.到目前为止,我对CSS的尝试一直是与相邻的选择器,但这对我来说是新的,所以我无法使它工作.
#home .about_li a:hover + #nav .about_li a {
opacity: .5;
}
这可以用CSS完成吗？
编辑:
谢谢你的回复.我如何更改相邻选择器的HTML才能工作？如果它不会严重影响网站的其他部分(我现在的结构非常完整),我可以尝试一下并做一些调整.
另一个编辑:
好的,我已经阅读了更多关于这些选择器的内容,现在我明白了.我认为通过成为主要div中的所有人都是兄弟姐妹:P现在我明白为什么它不起作用.我会看看我是否可以提出一个仅使用CSS的解决方法,并将在此处发布.否则我会和JS一起去:(
我有一个带有一些文本的 div，我想给它一个渐变边框，但 div 的内部是透明的，因为有一个背景图像。
我尝试修改我发现的示例中的一些现有代码，但我还没有完全到位。这里有几个小提琴来展示我所拥有的：
示例 1这实际上非常接近，只是渐变应该从左到右而不是从上到下。我尝试更改渐变的方向，但除非我将背景大小更改为 100%，否则更改不会显示，如果我将大小更改为 100%，则背景会重复，我会丢失透明部分。
示例 2这是另一种选择，看起来我只需要添加底部边框，但我不知道如何做。
如果有人可以看看并给我一些建议，我将不胜感激。
这是示例 1 的 CSS。
.box{
border-top: 5px solid #c13041;
border-bottom: 5px solid #bd9600;
background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, from(#c13041), to(#bd9600));
background-image: -webkit-linear-gradient(#c13041, #bd9600);
background-image: -moz-linear-gradient(#c13041, #bd9600), -moz-linear-gradient(#c13041, #bd9600);
background-image: -o-linear-gradient(#c13041, #bd9600), -o-linear-gradient(#c13041, #bd9600);
background-image: linear-gradient(#c13041, #bd9600), linear-gradient(#c13041, #bd9600);
background-size: 5px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
和示例 2。
.box{
border-left: 5px solid #c13041;
border-right: 5px solid #bd9600;
background-image: -webkit-gradient(linear, 100% 100%, 100% …