Question

我正在努力获得＆＃34;运动选择＆＃34;当你点击＆＃34; hover-athletic＆＃34;时改变颜色。我设法让它在悬停时改变颜色，但我也希望它能够永久改变颜色和＃34;当它被点击时。我只能使用CSS，没有jQuery。

布局由看起来像三角形的照片（png）构建。三角形分为三个不同的部分。然后我有＆＃34;选择＆＃34; -divs，每个都覆盖三角形照片后面的一个部分。在三角形照片的顶部有＆＃34;隐形＆＃34; div（＆＃34; hover＆＃34; -divs）可以触发＆＃34;选择＆＃34; -divs上的悬停效果。我不得不添加这些看不见的div，因为悬停没有在＆＃34;选择＆＃34; -divs上工作，因为它在照片后面（他们必须使设计看起来像我想要）。

请帮忙！

代码：

＆＃13;

#triangle {
  position: absolute;
  width: 200px;
  left: 150px;
  top: 30px;
}

#hover-athletic {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
}

#hover-athletic:hover~#athletic-choice {
  background-color: rgb(76, 76, 76);
}

#hover-slim {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
}

#hover-slim:hover~#slim-choice {
  background-color: rgb(76, 76, 76);
}

#hover-fat {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
}

#hover-fat:hover~#fat-choice {
  background-color: rgb(76, 76, 76);
}

#athletic-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
  z-index: -1;
}

#slim-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
  z-index: -1;
}

#fat-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
  z-index: -1;
}

＆＃13;

<img id="triangle" src="../photos/triangle.png" alt="triangle">

<div id="hover-athletic"></div>
<div id="hover-slim"></div>
<div id="hover-fat"></div>

<div id="athletic-choice"></div>
<div id="slim-choice"></div>
<div id="fat-choice"></div>

＆＃13;

Answer 1

我正在利用CSS选择器#!/usr/bin/python3 import argparse import shutil import logging import re import pickle import sys import subprocess from logging.handlers import RotatingFileHandler parser = argparse.ArgumentParser(description='Copy multiple Files from a specified data file') parser.add_argument('-c', '--configfile', default="config.dat", help='file to read the config from') parser.add_argument('-l', '--location', default="/home/admin/Documents/backup/",help='Choose location to store files') LOG_FILENAME = 'test.log' rotating_handler = RotatingFileHandler(LOG_FILENAME, maxBytes=10000000, backupCount=3) formatter = logging.Formatter('%(asctime)s %(levelname)-8s %(message)s') rotating_handler.setFormatter(formatter) logger = logging.getLogger('test') logger.setLevel(logging.DEBUG) logger.addHandler(rotating_handler) def read_config(data): try: dest = '/home/admin/Documents/backup/' # Read in date from config.dat data = open(data) # Interate through list of files '\n' filelist = data.read().split('\n') # Copy through interated list and strip white spaces and empty lines for file in filelist: if file: shutil.copy(file.strip(), dest) except FileNotFoundError: logger.error("Config file not found") print ("Config File not found") args = vars(parser.parse_args()) read = read_config(args['configfile'])，然后我可以使用复选框作为存储布尔变量的位置。

我已经使用了复选框，所以可以同时检查所有复选框，但是如果你想要一个组，你可以用单选按钮做类似的技巧。

:checked

label {
  display: block;
  width: 100%;
  height: 100%;
}

#triangle {
  position: absolute;
  width: 200px;
  left: 150px;
  top: 30px;
}

#hover-athletic {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
}

#hover-athletic:hover~#athletic-choice,
#bool-athletic:checked~#athletic-choice {
  background-color: rgb(76, 76, 76);
}

#hover-slim {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
}

#hover-slim:hover~#slim-choice,
#bool-slim:checked~#slim-choice {
  background-color: rgb(76, 76, 76);
}

#hover-fat {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
}

#hover-fat:hover~#fat-choice,
#bool-fat:checked~#fat-choice {
  background-color: rgb(76, 76, 76);
}

#athletic-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
  z-index: -1;
}

#slim-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
  z-index: -1;
}

#fat-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
  z-index: -1;
}

如果您对避免使用JS的其他提示和技巧感兴趣，我建议您查看here

我希望这会有所帮助。

Answer 2

你必须使用jQuery或类似的东西来改变CSS。除非你使用复选框hack，否则你不能在没有JavaScript的情况下更改DOM中的内容。

Answer 3

//get the bordercontainer

    var bc = dijit.byId("borderContainer"); 

//once you have the bordercontainer, then you can set the style to it using its 'style' property

    bc.set('style',"height: 300px; width: 500px;");

如果仅使用css单击另一个div，如何使div更改颜色？

3 个答案: