Jump to content

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


qpash

Recommended Posts

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

Link to comment
Share on other sites

procedure TMainForm.UniLabel1MouseEnter(Sender: TObject);

begin

UniLabel1.Font.Color:=clRed;

end;

 


procedure TMainForm.UniLabel1MouseLeave(Sender: TObject);

begin

UniLabel1.Font.Color:=clGreen;

end;

Link to comment
Share on other sites

Мне нужно средствами 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);
}
Link to comment
Share on other sites

 

Мне нужно средствами 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);
}

 

 

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

Link to comment
Share on other sites

Единственное что не получилось в этом коде, чтобы цвет самого текста менялся, если есть мысли - подскажите. Вот полный рабочий код 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%);
}
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...