Question

我无法弄清楚这个问题，它让我烦恼！

我是HTML CSS的新手，但在我花费无数个小时试图让它工作之前，你能告诉我这是否可能吗？我没有js的经验，因此我只坚持使用CSS和HTML：）

这是我创建的图片 Example of my question

Answer 1

您可以使用CSS轻松完成此操作，但在您不希望页面刷新的情况下单击除外。在这种情况下，您只能使用：hover作为项目链接。你可以这样做：

以下是如何在没有JavaScript的情况下执行此操作：

首先是HTML：

<h1>Projects</h1>
<ul id="main-list">
    <li class="main-item">
        <div>Project 1</div>
        <ul class="images">
            <li><img src="http://lorempixel.com/100/60/sports/1"/></li>
            <li><img src="http://lorempixel.com/100/60/sports/2"/></li>
            <li><img src="http://lorempixel.com/100/60/sports/3"/></li>
            <li><img src="http://lorempixel.com/100/60/sports/4"/></li>
        </ul>
    </li>
    <li class="main-item">
        <div>Project 2</div>
        <ul class="images">
            <li><img src="http://lorempixel.com/100/60/city/1"/></li>
            <li><img src="http://lorempixel.com/100/60/city/2"/></li>
            <li><img src="http://lorempixel.com/100/60/city/3"/></li>
            <li><img src="http://lorempixel.com/100/60/city/4"/></li>
        </ul>
    </li>
    <li class="main-item">
        <div>Project 3</div>
        <ul class="images">
            <li><img src="http://lorempixel.com/100/60/abstract/1"/></li>
            <li><img src="http://lorempixel.com/100/60/abstract/2"/></li>
            <li><img src="http://lorempixel.com/100/60/abstract/3"/></li>
            <li><img src="http://lorempixel.com/100/60/abstract/4"/></li>
        </ul>
    </li>
</ul>

CSS：

h1 {
  text-align: center;
}
#main-list {
  position: relative;
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;  
  margin: 3px 0; 
  padding: 3px 0; 
  text-align: center;
}
li.main-item {
    display: inline-block;
    width: 100px;
}
.images {
    opacity:0;
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
li:hover .images {
    opacity:1;
}
.images li {
    display: inline-block;
    float: left;
    width: 100px;
    height: 60px;;
    margin-top: 6px;
}

这个问题是你需要继续盘旋以查看图像。不确定这是不是问题。

在你的情况下，如果有数以千计的jQuery Menu插件，那么我只会给我们一个。

Answer 2

使用jquery将更容易实现。

但是因为你只想使用html css，我试着解释一下。

您可以使用'：hover'选择器

例如

.button1:hover .children-images {
   background-image: url(./path-to-image);
}

这意味着，当用户悬停在'.button1'上时，所有.children-images都会有新的背景图片

但请注意，它只会影响悬停元素的 CHILDREN 。

换句话说，

<a class="button1">
   button text
   <div class="children-images button1-images">
      <img src="#"/>
       <img src="#"/>
      <img src="#"/>
   </div> 
</a>

<a class="button2">
button text
   <div class="children-images button2-images">
      <img src="#"/>
       <img src="#"/>
      <img src="#"/>
   </div> 
</a>

鉴于上面的html和css中的两个按钮，它只会影响'.children-images.button1-images'而不是'.children-images.button2-images'

我希望它有意义

它是否可以实现还取决于视觉元素，因为你的html结构将非常有限。

因此，即使您可以达到效果，您也可以实现网站的其他视觉要求

选项卡菜单中的CSS选项卡菜单（选项卡作为图像）这是否可能？

2 个答案: