text highlighting (Подсветка текста)

[qpash]

HI!

How to make text highlighting when hovering the mouse over a component by means of JS?

Need for unilabel, unicheckbox and uniradiobutton.

 

Как сделать подсветку текста при наведении мыши на компонент средствами JS?

Нужно для unilabel, unicheckbox and uniradiobutton

 

Use licensed version

Version:1.50.0 build 1479

[Sherzod]

Здравствуйте,

 

Вы можете попробовать это сделать через

custom CSS + overCls конфиг я думаю

[Serg]

procedure TMainForm.UniLabel1MouseEnter(Sender: TObject);

begin

UniLabel1.Font.Color:=clRed;

end;

 

procedure TMainForm.UniLabel1MouseLeave(Sender: TObject);

begin

UniLabel1.Font.Color:=clGreen;

end;

[qpash]

Мне нужно средствами CSS. Пытаюсь сделать плавное подчеркивание и смена цвета текста - не работает в GUI,

хотя в редакторе работает нормально ( пробовал тут https://codepen.io/pen )

 

HTML:

<p class="fun-hover"><b>TEST STRING</b></p>

 

CSS:

.fun-hover { 

  background-image: -webkit-linear-gradient(left, transparent 65%, complement(#00aeff) 80%);

  background-image: linear-gradient(to bottom, transparent 65%, complement(#00aeff) 80%);

  background-position: 150;

  background-size: 200%;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  color: black;

  }

.fun-hover:hover {

  background-position: -100%;

  color: complement(#00aeff);

}

[qpash]

События MouseEnter и MouseLeave нет в unicheckbox!

[Serg]

Ну я и написал только для UniLabel)

[Sherzod]

 

Мне нужно средствами CSS. Пытаюсь сделать плавное подчеркивание и смена цвета текста - не работает в GUI,

хотя в редакторе работает нормально ( пробовал тут https://codepen.io/pen )

 

HTML:

<p class="fun-hover"><b>TEST STRING</b></p>

 

CSS:

.fun-hover { 

  background-image: -webkit-linear-gradient(left, transparent 65%, complement(#00aeff) 80%);

  background-image: linear-gradient(to bottom, transparent 65%, complement(#00aeff) 80%);

  background-position: 150;

  background-size: 200%;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  color: black;

  }

.fun-hover:hover {

  background-position: -100%;

  color: complement(#00aeff);

}

 

 

Какой браузер используете ?

[qpash]

Я разобрался, если ставить цвет complement(color), то не работает, надо ставить цвет HTML. Спасибо!

[qpash]

Единственное что не получилось в этом коде, чтобы цвет самого текста менялся, если есть мысли - подскажите. Вот полный рабочий код CSS (без цвета текста)

.fun-hover { 

  background-image: linear-gradient(to bottom, transparent 100%, #18BC9C 100%);

  background-position: 150;

  background-size:200%;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  }

.fun-hover:hover {

  background-position: -100%;

  background-image: linear-gradient(to bottom, transparent 0%, #18BC9C 80%);

}

[Sherzod]

Добавьте это правило тоже (ну к примеру это для UniLabel):

label.fun-hover:hover {
  color: red;
}

[qpash]

Спасибо!