没有JavaScript的图像翻转 [英] Image rollovers without JavaScript

问题描述

我正在尝试发现一种不使用JavaScript的方法，该方法允许您将鼠标悬停在较小的div(或图像)上以更改较大的div的背景.使用HTML& amp;可以完全做到这一点吗?CSS?

I'm trying to discover a way that doesn't use javascript that allows you to hover over the smaller divs (or images) to change the background of the larger div. Is this possible purely with HTML & CSS?

该示例有两个问题:1.仅将div之一滚动即可(因为它紧随其后)2.在该div上滚动时，将鼠标移开后主div的背景会恢复，因此这不是永久更改

The example has 2 problems: 1. Only rolling over one of the divs works (because it's straight after) 2. When rolling over that div, the background of the main div reverts after moving the mouse off, so it's not a permanent change

我很好奇，感谢您的任何建议，谢谢！

I'm very curious and appreciate any advice here, thanks!

更新:我刚刚创建了这个代码: https://jsfiddle.net/ehzsmusr/

UPDATE: I've just created this: https://jsfiddle.net/ehzsmusr/

背景似乎有所变化，但是当您将鼠标悬停在其他东西上时，背景不会停留.这个可以解决吗?

The backgrounds seem to change, but don't stay when you hover over something else. Can this be fixed?

#main {
  width: 300px;
  height: 200px;
  background: red;
  float: left;
}
.hover1 {
  float: left;
  background: blue;
  width: 100px;
  height: 75px;
}
.hover2 {
  float: left;
  background: green;
  width: 100px;
  height: 75px;
}
.hover1:hover + #main {
    background: #ccc
}
.hover2:hover + #main {
    background: #ccc
}

<div class='container'>
  
  <div class='hover1'></div>
  <div class='hover2'></div>
  <div id='main'></div>
</div>

推荐答案

如果您不介意单击评论中提到的内容，则这是

if you don't mind clicking as you mentioned in the comment, here's one implementation of the checkbox hack mentioned by @kabanus ( using radio buttons instead )

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background: #eee;
}

input {
  display: none;
}

label {
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
}

#redL {
  background: red;
}

#greenL {
  background: green;
}

#blueL {
  background: blue;
}

#red:checked ~ #big {
  background: red;
}

#green:checked ~ #big {
  background: green;
}

#blue:checked ~ #big {
  background: blue;
}

#big {
  width: 50vw;
  height: 50vh;
  background: #fff;
  clear: both;
  margin: auto;
}

<div id="container">
  <input type="radio" id="red" name="color" />
  <label for="red" id="redL"></label>

  <input type="radio" id="green" name="color" />
  <label for="green" id="greenL"></label>

  <input type="radio" id="blue" name="color" />
  <label for="blue" id="blueL"></label>

  <div id="big">

  </div>
</div>

另一种方法是将 transition-delay 设置为 604800s (或更多)，以便颜色更改并在该秒数后(一周后)返回.

Another hack would be setting the transition-delay to 604800s ( or more ) so the color changes and goes back after that numbers of seconds ( one week later ).

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background: #eee;
}

#redL {
  background: red;
}

#greenL {
  background: green;
}

#blueL {
  background: blue;
}

label {
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
}

#redL:hover ~ #big {
  background: red;
  transition-delay: 0s;
}

#greenL:hover ~ #big {
  background: green;
  transition-delay: 0s;
}

#blueL:hover ~ #big {
  background: blue;
  transition-delay: 0s;
}

#big {
  width: 50vw;
  height: 50vh;
  background: #fff;
  clear: both;
  margin: auto;
  transition: all .1s 604800s;
}

<div id="container">
  <label id="redL"></label>
  <label id="greenL"></label>
  <label id="blueL"></label>
  
  <div id="big">

  </div>
</div>

这篇关于没有JavaScript的图像翻转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！