Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have got this html

<div id="slideMenu">
    <div id="slideM1" onmouseover="colorM(1)">Something 1</div>
    <div id="slideM2" onmouseover="colorM(2)">Something 2</div>
    <div id="slideM3" onmouseover="colorM(3)">Something 3</div>
    <div id="slideM4" onmouseover="colorM(4)">Something 4</div>
    <div id="slideM5" onmouseover="colorM(5)">Something 5</div>
</div>

and this CSS 

html, body{ 
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}
#slideMenu {
    float: right;
}
#slideM1:before, #slideM2:before, #slideM3:before, #slideM4:before, #slideM5:before {
    content: "";
    position: absolute;
    top:0;
    right:210px;
    width: 0;
    height: 0;
    border-top: 32px solid transparent;
    border-right: 30px solid #602F4F;
    border-bottom: 32px solid transparent;
    display:none;
}
#slideM1, #slideM2, #slideM3, #slideM4, #slideM5 {
    background-color: silver;
    height: 54px;
    width: 200px;
    text-align: right;
    position:relative;
    padding: 5px;
    color: white;
    margin-bottom: 2px;
}

and finally this Javascript 

function colorM(n) {
    document.getElementById("slideM"+n).style.backgroundColor="#602F4F";
    document.getElementById("slideM"+n+":before").style.display="block";
}

Here is jsfiddle http://jsfiddle.net/xN6Da/ . As you can see CSS triangle has default value display: none;. But after it's hovered I want to change it's value to be visible. I tried to use document.getElementById("slideM"+n+":before").style.display="block"; but it still hides the triangle, so how to remove that display: none; from CSS with Javascript?

Thank you

share|improve this question
Pseudo elements (the css-generated ::before and ::after) are presentation-only, and are not (currently at least) available within the DOM. To adjust the styles you'd need to access the style rules in which the properties are defined and change those. Or add a class to the 'parent' element, and use that class to influence the colour. – David Thomas May 18 at 15:55
So it's not possible to edit it while it's just one DIV? – Kyrbi May 18 at 15:57
Add/remove a class and do it with a CSS rule; it's extremely easy. Your CSS would be simpler if you gave your slides a common class, so you wouldn't have to list out the "id" values. – Pointy May 18 at 16:06

2 Answers

up vote 2 down vote accepted

You cannot modify pseudo classes via Javascript. You will need to change it by adding/removing a class. For instance, by adding CSS like this:

#slideM1.show:before, #slideM2.show:before, #slideM3.show:before, #slideM4.show:before, #slideM5.show:before {
   display: block;
}

and this Javascript

function colorM(n) {
    document.getElementById("slideM"+n).style.backgroundColor="#602F4F";
    document.getElementById("slideM"+n+).className="show";
}

Here is the fiddle. http://jsfiddle.net/xN6Da/1/

I would recommend removing the IDs and replacing them with a common Class. Currently, every time you add another element. You are going to need to create another ID and add it to the CSS.

share|improve this answer
You posted a link to the original jsfiddle. – Pointy May 18 at 16:05
Just fixed it. Now it should work. – Taylor Hakes May 18 at 16:07
yes it works awesomely. :) – Kyrbi May 18 at 16:08
great. can you mark the answer as accepted? – Taylor Hakes May 18 at 16:11
jsfiddle.net/xN6Da/2 I have finished this. Would you mind telling me how to remove that class again? Thank you. – Kyrbi May 18 at 16:18
show 1 more comment
up vote -1 down vote

If your asking how to change style rules via Javascript, this is the code I use:

//* Function: putClassAttrib((myclass,myatt,myval)
//* Purpose: Add/modify a rule in a given class
putClassAttrib = function(myclass,myatt,myval) {
  // e.g. putClassAttrib(".hideme","whiteSpace","nowrap")
  var myrules;  
  if (document.all) {
    myrules = 'rules';
    }
  else if (document.getElementById) {
    myrules = 'cssRules';
    }
  else {
    return "Prototype warning: no style rules changer for this browser"
    }
  for (var i=0;i<document.styleSheets.length;i++){
    for (var j=0;j<document.styleSheets[i][myrules].length;j++) {
      if (document.styleSheets[i][myrules][j].selectorText == myclass) {
        document.styleSheets[i][myrules][j].style[myatt] = myval;
        }
      }
    }
  return ""; 
  }

(notice, I am an unrepentant advocate of banner style indenting ;-)... http://en.wikipedia.org/wiki/Indent_style#Banner_style

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.