Question

我有一个菜单，活动项目在加载时有一个活动类，它会改变它的背景。

其他项目的悬停会改变悬停项目的背景。

<ul>
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>

<style>
  li:hover, li.active {background:black}
</style>

有没有办法删除在纯CSS中悬停的其他项目的活动类背景。类似的东西：

li.hover .active {background:none}

如果活动在li下，则可以使用，但在此处不起作用。

Answer 1

使用CSS无法可靠地实现这一点，因为CSS只能影响在DOM中出现以后的元素，而不是之前，因此将鼠标悬停在第一个 {{1可以使用以下CSS影响当前li元素：

li.active

JS Fiddle demo

但是，将鼠标悬停在第三个li:hover ~ li.active { background-color: #f00; /* or whatever */ } 上不会影响相同的li元素。

但是，以下方法可行：

li.active

JS Fiddle demo

Answer 2

试试这个：

ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }

这有几个条件：

支持:not伪标记
ul不得有太多填充或空格，否则您可以激活:hover的{{1}}而不会悬停在任何ul

Answer 3

这对我有用：

＆＃13;

try:
    os.remove('vtg12.csv')
except OSError:
    pass



driver = webdriver.Chrome()
driver.set_window_size(1024, 600)
driver.maximize_window()

driver.get('https://betting.club/sports/Soccer/100')

SCROLL_PAUSE_TIME = 0.5
clickMe = wait(driver, 15).until(EC.element_to_be_clickable((By.XPATH, ('//a/ancestor::div[contains(@class, "table-grid")]/preceding-sibling::a[contains(@class, "border--left")]'))))

last_height = driver.execute_script("return document.body.scrollHeight")

while True:

    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")


    time.sleep(SCROLL_PAUSE_TIME)


    new_height = driver.execute_script("return document.body.scrollHeight")
    if new_height == last_height:
        break
    last_height = new_height

time.sleep(0)
clickMe = wait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, ('//a/ancestor::div[contains(@class, "table-grid")]/preceding-sibling::a[contains(@class, "border--left")]'))))
elems = driver.find_elements_by_xpath("//a/ancestor::div[contains(@class, 'table-grid')]/preceding-sibling::a[contains(@class, 'border--left')]")
elem_href = []

for elem in elems:
    print(elem.get_attribute("href"))
    elem_href.append(elem.get_attribute("href"))

# TEAM odd
langs = driver.find_elements_by_css_selector("div > div:nth-child(1) > a > div > div.flag__image--rev.nowrap > div")
langs_text = []

for lang in langs:
    print(lang.text)
    langs_text.append(lang.text)

time.sleep(0)

#Team
langs1 = driver.find_elements_by_css_selector("div > div:nth-child(1) > a > div > div.flag__body > h6")
langs1_text = []

for lang in langs1:
    print(lang.text)
    langs1_text.append(lang.text)

# Draw odds
langs2 = driver.find_elements_by_css_selector("div > div:nth-child(2) > a > div > div.flag__image--rev.nowrap > div")
langs2_text = []

for lang in langs2:
    print(lang.text)
    langs2_text.append(lang.text)


# Lay odds
langs3 = driver.find_elements_by_css_selector("div > div:nth-child(3) > a > div > div.flag__image--rev.nowrap > div")
langs3_text = []

for lang in langs3:
    print(lang.text)
    langs3_text.append(lang.text)


# Draw
langs4 = driver.find_elements_by_css_selector("div > div:nth-child(2) > a > div > div.flag__body > h6")
langs4_text = []

for lang in langs4:
    print(lang.text)
    langs4_text.append(lang.text)

# Lay Team
langs5 = driver.find_elements_by_css_selector("div > div:nth-child(3) > a > div > div.flag__body > h6")
langs5_text = []

for lang in langs5:
    print(lang.text)
    langs1_text.append(lang.text)

time.sleep(0)

# odds
with open ('vtg12.csv', 'a',newline='') as outfile:
    writer = csv.writer(outfile)
    for row in zip(langs1_text, langs2_text, langs3_text, langs4_text, langs5_text, elem_href):
        print(row)
        writer.writerow(row)

＆＃13;

.dvchange1 {
  color:#fff;
    }
    .dvOne:hover .dvchange2 {
        color:#000;
    }

＆＃13;

悬停在css中的另一个类上的效果

3 个答案: