3

Доброго времени суток коллеги, вопрос такой: Как изменить стиль элемента при нажатии на другой элемент?


Пример: У меня есть вот такая кнопка

Кнопка Google

<a href="#space">
        <span class="button2">
            <span class="myfirstchar">G</span>OOGLE
        </span>
</a>

Как при нажатии на кнопку первая буква меняла цвет на красный(к примеру)?

0

3 ответа 3

3

Еще как вариант

a {
  text-decoration: none;
  display: block;
  width: 10rem;
  height: 5rem;
  line-height: 5rem;
  background: #111;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 4px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
}
a:first-letter {
  color: cornflowerblue;
}
a:focus:first-letter{
  color: tomato;
}
<a href="#space">
    GOOGLE
</a>

1
  • Спасибо, но мне нужно было сделать именно как кнопка но это легко исправить если в строке a:focus:first-letter заменить "focus" на "active". 7 сен 2016 в 21:48
2

Можно сделать на основе checkbox, безо всяких скриптов и с корректным сохранением состояния:

.logo input {
    display: none
}

.logo input + label
{
    background-color: #0b0b0b;
    border-radius: 4px;
    border: 4px solid #065284;

    -webkit-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    -moz-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);

    color: white;
    cursor: pointer;
    display: inline-block;
    font: 1.5rem sans-serif;
    letter-spacing: 4px;
    padding: 0.5rem 1rem;
    text-transform: uppercase
}

.logo input + label span
{
    color: cornflowerblue
}

.logo input:checked + label span
{
    color: tomato
}
<span class="logo">
    <input type="checkbox" id="logo" />
    <label for="logo"><span>G</span>oogle</label>
</span>

Суть состоит в том, что checkbox скрытно хранит состояние, влияя на страницу через стилевой псевдокласс :checked. Пользователь, в свою очередь, может менять это состояние через связанный label.


Добавлено:

Если необходимо заблокировать обратное переключение, можно организовать подмену label на неинтерактивный div при активации флажка:

.logo input + label,
.logo .active
{
    background-color: #0b0b0b;
    border-radius: 4px;
    border: 4px solid #065284;

    -webkit-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    -moz-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);

    color: white;
    display: inline-block;
    font: 1.5rem sans-serif;
    letter-spacing: 4px;
    padding: 0.5rem 1rem;
    text-transform: uppercase
}

.logo input + label
{
	cursor: pointer;
}

.logo input + label span
{
    color: cornflowerblue
}

.logo .active span
{
    color: tomato
}

/* Логика переключения */

.logo input,
.logo input:checked ~ label,
.logo input:not(:checked) ~ .active {
    display: none
}
<span class="logo">
    <input type="checkbox" id="logo" />
    <label for="logo"><span>G</span>oogle</label>
    <div class="active"><span>G</span>oogle</div>
</span>

1

Например так:

$('.btn').on('click', function(e){
  e.preventDefault();
  
  var 
    $this = $(this),
    chart = $this.find('.myfirstchar');
  
  if(!$this.hasClass('changeColor')){
    $this.addClass('changeColor');
  } else {
    $this.removeClass('changeColor');
  }
});
a {
  text-decoration: none;
  display: block;
  width: 10rem;
  height: 5rem;
  line-height: 5rem;
  background: #111;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 4px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.myfirstchar {
  color: cornflowerblue;
}

.changeColor .myfirstchar {
  color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#space" class="btn">
        <span class="button2">
            <span class="myfirstchar">G</span>OOGLE
        </span>
</a>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.