Question

我想仅改变底部边框的1/3的颜色，我希望只有当有人点击文本（夏天，春天或冬天）时才能更改颜色。是否可以仅使用CSS（使用像之前或之后的伪元素）执行此类操作，或者在这种情况下是否必须使用JS？

HTML：

<div class="seasons">
        <span id="text1">Summer</span>
        <span id="text2">Spring</span>
        <span id="text3">Winter</span>
</div>

CSS：

.seasons {
    color: #B5BAB8;
    display: inline-block;
    margin: 10px;
    border-bottom: 2px solid #B5BAB8;
    padding-bottom: 15px;
    margin-top: 465px;
  }

  .seasons span { 
    width: 250px;
    display: inline-block;
  }

Answer 1

像this这样的东西可以使用JS

CSS

import numpy as np
import xarray as xr
import pandas as pd
import datetime as dt

lons = np.arange(-75, -70, .5).astype(np.float32)
lats = np.arange(40,42, .25).astype(np.float32)
[x, y] = np.meshgrid(lons, lats)
u = np.random.randn(1, 8, 10).astype(np.float32)
v = np.random.randn(1, 8, 10).astype(np.float32)
time_index = pd.date_range(dt.datetime.now(), periods=1)

ds = xr.Dataset()
coords = ('time', 'lat', 'lon')
ds['u'] = (coords, np.float32(u))
ds['v'] = (coords, np.float32(v))
ds.coords['lon'] = lons
ds.coords['lat'] = lats
ds.coords['time'] = time_index

encoding = {'lat': {'zlib': False},
            'lon': {'zlib': False},
            'u': {'_FillValue': -999.0,
                  'chunksizes': (1, 8, 10),
                  'complevel': 1,
                  'zlib': True}
            }
ds.to_netcdf('test.nc', encoding=encoding)

<强> JS

.seasons {
    color: #B5BAB8;
    display: inline-block;
    margin: 10px;
    margin-top: 465px;
}

.seasons span { 
    width: 250px;
    float: left;
    padding-bottom: 15px;
    border-bottom: 2px solid #B5BAB8;
}

.seasons span.highlighted { 
    border-bottom-color: red;
}

Answer 2

编辑： upps。我想你想要改变全边界的33％。我以为你想改变每个跨度元素边界的33％。其宽度几乎相同。

我在Codepen上尝试了您的代码，但在建议之前，让我先回答您的问题：

答案：

是的，你可以在没有JS的情况下解决这个问题。

您必须使用以下内容：

<强> 1。线性渐变边框：你可以使用

linear-gradient(to right, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);

为你的边界。这些百分比可能随你而改变。

<强> 2。：active，：focus或：悬停这些跨度的伪状态：您可以更改单击（：active）状态的渐变。

linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1) 70%);

第3。添加效果： 您也可以使用

transition: all .3s ease-in-out;

为了你的效果。

但我的建议是：

使用：带有position: absolute的元素之后：活动状态。

您可以为这些跨度创建：after元素：这样的活动状态：

span:active:after{
    content:"";
    display: block;
    position: absolute;
    bottom: 1px;
    width: 100px;
    height: 5px;
    display: block;
}

您可以为此伪元素添加背景，也可以为此元素添加正常边框。

如果定位不起作用，请为父母尝试position: relative。对于跨度，这也需要display: block。

Answer 3

这里没有JS的可能性。

＆＃13;

input[type="radio"] {
  display: none;
}

label {
  cursor: pointer;
  border-bottom: 3px solid #0ff;
}

label:not(:last-child) {
  margin-right: 1em;
}

input[type="radio"]:checked+label {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, #f0f 0%, #f0f 33%, #3acfd5 33%, #fff, #3acfd5 34%, #0ff, 34%, #0ff 100%);
  border-image-slice: 1;
}

＆＃13;

<div class="seasons">
  <form>
    <input id="summer" name="season" type="radio" value="summer">
    <label for="summer">Summer</label>
    <input id="spring" name="season" type="radio" value="spring">
    <label for="spring">Spring</label>
    <input id="winter" name="season" type="radio" value="winter">
    <label for="winter">Winter</label>
  </form>
</div>

＆＃13;

只有部分边框会改变颜色

3 个答案:

答案：

但我的建议是：