html - How to make outer div doesn't react when inner div is :active in css -


i have 2 div's inside each other. outer 1 bigger when click on outer changes far used .outer:active in css. when click on inner changes (i used .outer .inner:active), outer div changes also.

here's jsfiddle: https://jsfiddle.net/hetjwnxa/2/

html:

<div class="testimonials-content">  <div class="testimonials-square">   <a href="">       <div class="translation-button">     <p>translate</p>   </div> </a> <a href="">   <div class="testimonials-square-text">     <p>title</p>   </div> </a> </div> <div class="testimonials-square">   <a href="">       <div class="translation-button">     <p>translate</p>   </div> </a> <a href="">   <div class="testimonials-square-text">     <p>title</p>   </div> </a> </div> <div class="testimonials-square">   <a href="">       <div class="translation-button">     <p>translate</p>   </div> </a> <a href="">   <div class="testimonials-square-text">     <p>title</p>   </div> </a> </div> </div>

and here css:

.testimonials-content { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 750px; background-color: #ffffff; }  .testimonials-square { width: 214px; height: 214px; border-radius: 10px; border: 5px solid #282165; color: #282165; font-size: 22px; text-align: center; float: left; margin-right: 26px; margin-bottom: 27px; background-color: #ffffff; text-align: center; color: #282165; font-weight: bold; }  .translation-button { width: auto; height: auto; border-radius: 2px; border: 2px solid #282165; color: #282165; font-size: 22px; text-align: center; float: left; margin: 5px; background-color: #ffffff; text-align: center; color: #282165; font-weight: bold; }  .testimonials-square .translation-button p { color: #ffffff; background-color: #282165; }  .testimonials-square-text { margin-top: 80px; margin-left: 20px; margin-right: 20px; text-align: center; }  .testimonials-square p { color: #282165; }  .testimonials-square:active { background-color: #282165; color: #ffffff; }  .testimonials-square .translation-button:active p { color: #282165; background-color: #ffffff; }  .testimonials-square:active p { background-color: #282165; color: #ffffff; }  .testimonials-square:nth-child(2n+1) { background-color: #282165; color: #ffffff; }  .testimonials-square:nth-child(2n+1) .translation-button { border: 2px solid #ffffff; }  .testimonials-square:nth-child(2n+1) .translation-button p { background-color: #ffffff; color: #282165; }  .testimonials-square:nth-child(2n+1) .translation-button:active p { background-color: #282165; color: #ffffff; }  .testimonials-square:nth-child(2n+1) p { background-color: #282165; color: #ffffff; }  .testimonials-square:nth-child(2n+1):active { background-color: #ffffff; color: #282165; }  .testimonials-square:nth-child(2n+1):active p { background-color: #ffffff; color: #282165; }  p {   margin: 0px; }  {    text-decoration: none; }

how can make outer div not change after clicking on inner div?

any appreciated. thanks!

when element :active, it's ancestor elements :active too, obvious reasons.

in case, if have access html, add element (e.g. .testimonials-bg) inside .testimonials-square sibling .translation-button , style stretches fit .testimonials-square , add :active style it.

html

<div class="testimonials-content">   <div class="testimonials-bg"></div>   <div class="testimonials-square">     <a href="">       <div class="translation-button">         <p>translate</p>       </div>     </a>     <a href="">       <div class="testimonials-square-text">         <p>title</p>       </div>     </a> </div>

css

.testimonials-bg {   position:absolute;   top:0;   left:0;   right:0;   bottom:0; } .testimonials-bg:active {   background-color: #282165; }

Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

Swift game error message -

i following ios game tutorial. cannot figure out wrong here. error on these 2 lines. let newangle = percent * 180 - 180 cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi); 180.0 //error "use of unresolved identifier 'percent'" the tutorial uses: cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi)/ 180.0 but changed error suggested import spritekit class gamescene: skscene { var cannon: skspritenode! var touchlocation:cgpoint = cgpointzero override func didmovetoview(view: skview) { /* setup scene here */ cannon = self.childnodewithname("cannon") as! skspritenode } override func touchesbegan(touches: set<uitouch>, withevent event: uievent?) { /* called when touch begins */ touchlocation = touches.first!.locationinnode(self) } override func touchesmoved(touches: set<uitouch>, withevent event: uievent?) { touchlocation = touches.first!.locationinn...
Read more