CODEWITHSUNDEEP
css
rohan
rohan

Reputation: 185

Set the css property of a class based on its visibility property using CSS only

I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like

<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
    [Block of Code]
</div>

Now i need to define the following in style.css file.

.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}

Is this possible???

Upvotes: 0

Views: 2679

Answers (3)

user1575120
user1575120

Reputation: 339

You can do something using attrchange - a jQuery plugin , like this:

  1. Add "attrchange" script into HTML page like

  2. In Javascrip catch event

var email_ver_input = $("input#email_ver_input.verifyInput"); email_ver_input.attrchange({ trackValues: true, callback: function (event) { if (email_ver_input.is(":visible")){ $("#inputcode_wrap").show(); }
} });

Upvotes: 0

Armel Larcier
Armel Larcier

Reputation: 16027

What you are trying to do is not "really" possible.

I mean it's ill thought by design in the first place.

Even Vamsikrishna's solution might not work as expected.

If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.

Moreover , setting inline styles on html elements is bad practice itself in most cases.

I suggest you try and learn css principles a little more.

I'd do the following:

HTML

<div class="div-class div-hidden">
    [Block of Code]
</div>

CSS

.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}

Then you can use javascript to toggle the "div-hidden" class.

Upvotes: 0

Vamsikrishna
Vamsikrishna

Reputation: 176

yes with css attributre selectors you can do it try the below css:

.div-class[style*="visible"] {  
  color: green; 
}  

.div-class[style*="hidden"] {  
  color: red; 
}

Upvotes: 2

Related Questions