Как скрыть текст (разного цвета!) под фоном до клика на него мышкой?

245

03 июля 2017, 18:25

Добрый день!

Хочу скрыть цветной текст под прямоугольником такого же цвета. Пример поправил, возможно ли это сделать для текста разных цветов?

div.myHiddenBlock { 
  color: green; 
  background: green; 
} 
 
span.myVIPText 
{ 
  color: red; 
} 
 
span.myVisibleBlock { 
  color: green; 
}

<div class="myHiddenBlock" onclick="this.className='myVisibleBlock';"> 
  Текст, который нужно <span class="myVIPText">скрыть</span> до клика мышкой 
</div>

Answer 1

Вот пример:

body { 
  backround-color: #ffffff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<span style="color:lime;" class="myHiddenBlock"> 
  Текст, который нужно скрыть до клика мышкой 
</span> 
<span style="color:red;" class="myHiddenBlock"> 
  Текст, который нужно скрыть до клика мышкой 
</span> 
<span style="color:blue;"> 
  Простой текст 
</span> 
 
<script> 
$(document).ready(function(){ 
  $(".myHiddenBlock").each(function(ind, el) {    
  		el.style.backgroundColor = $(el).css("color"); 
  }); 
   $(document).on("click", ".myHiddenBlock", function(e){ 
   		e.target.style.backgroundColor = "inherit"; 
   }) 
 }); 
</script>

Answer 2

body { 
  color: green; 
}

<span style="background-color: green;" onclick="this.style.backgroundColor=document.body.style.backgroundColor;">Текст, который нужно скрыть до клика мышкой</span>