How to prevent hovering button,div,li if it already has active status by means of css?
#list-of-tests .item-test:hover {
background-color: #4d5f75;
border: solid 1px #4d5f75;
}
#list-of-tests .item-test:active {
background-color: #93c3cd;
border: solid 1px #93c3cd;
}
Two ways:
1) Use !important for the :active state:
#list-of-tests .item-test:active {
background-color: #93c3cd !important;
border: solid 1px #93c3cd !important;
}
2) Specify multiple states:
#list-of-tests .item-test:active,
#list-of-tests .item-test:active:hover {
background-color: #93c3cd;
border: solid 1px #93c3cd;
}
Related
How can I draw a thin horizontal line without using the <hr> tag ?
I tried this:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
Although it works, I want this line to be thinner. I tried to reduce 1px to 0.5px, but it didn't work.
Per this css-tricks discussion, you could give this a go:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>
You can use it but there is not much difference.
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>
There are many ways of doing this. we cant make the size of the borders less than 1px in CSS so I have tried this way. Feel free to change the opacity.
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}
For an assignment at school I need to make the background of my body change into the background of whatever button (div) I click on.
I don't get what I'm doing wrong here. Don't I have to use querySelector() and then add .style.backgroundImage to make it change?
function btnClick() {
var bgImg = document.querySelector('body').style.backgroundImage = "url(https://www.planwallpaper.com/static/cache/86/dd/86ddabfea12cf403e6a7e5850f272cc9.jpg)";
// was url(../img/img1.png)
}
.Btn {
border-radius: 100%;
background-color: #CCC;
width: 128px;
height: 128px;
border: 2px solid white;
box-shadow: 1px 1px 10px black;
}
.Btn:hover {
cursor: pointer;
}
#Btn1 {
background-image: url(https://www.planwallpaper.com/static/cache/86/dd/86ddabfea12cf403e6a7e5850f272cc9.jpg);
background-size: cover;
background-repeat: none;
}
<div class="Btn" onclick="btnClick ()" id="Btn1"></div>
I have a graph details, but i would like to show using css shapes. for that i am trying to create a css3 shapes to match my graphics ( see attached ) but i am not able to get the result.
How to reproduce this graphics?
my try: this is very bad:
<div class="container">
<div id="triangle-red"></div>
<div id="triangle-blue"></div>
<div id="triangle-yellow"></div>
</div>
#triangle-red {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-blue {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
#triangle-yellow
{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid yellow;
border-bottom: 50px solid transparent;
}
demo online
Note: according to the values of each comb, i would like the calculate the height and width, by the data what i am getting. (it's like graph)
First of all you will need 6 divs.
every div is triangle : to make one with css check this
use transform:rotate(xdeg)
for the shadows just change the color.
also use z-index to make the red divs above the blues
I am using the current javascript for tabs in a Sharepoint webpart. Unfortunately it seems like it forces the tabs to absolute top. So anything I added to that "column" of webparts goes underneath the row of tabs, including the banner. I am try to read the code and see what I can do to change this, but can't figure it out. Do you guys have any ideas? Thanks!
Source: http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx
Code I'm Using:
<style type="text/css">
.et-tab {
PADDING-BOTTOM: 6px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: inline-block; BACKGROUND: url(/_layouts/images/selbg.png) repeat-x; FONT-SIZE: 13pt; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 6px
}
.et-activetab {
BORDER-BOTTOM: #706257 1px solid; BORDER-LEFT: #706257 1px solid; BACKGROUND-COLOR: #706257; COLOR: #ffffff; BORDER-TOP: #706257 1px solid; BORDER-RIGHT: #706257 1px solid
}
.et-inactivetab {
BORDER-BOTTOM: #f7f7f7 1px solid; BORDER-LEFT: #f7f7f7 1px solid; BACKGROUND-COLOR: #f7f7f7; COLOR: #706257; BORDER-TOP: #f7f7f7 1px solid; BORDER-RIGHT: #f7f7f7 1px solid
}
.et-separator {
BACKGROUND-COLOR: #706257; HEIGHT: 5px
}
.et-tabrow {
WHITE-SPACE: nowrap
}
.et-offscreen {
POSITION: absolute; MAX-WIDTH: 1px; MAX-HEIGHT: 1px; TOP: -9999px
}</style><script type="text/javascript">
(function(){
var AP="",sec=0,Header="none",Split="No",Expand="",Print="";
if (document.forms[0].elements["_wikiPageMode.value"]=="true"||document.forms[0].elements["MSOLayout_InDesignMode"].value=="1"){return;}
var el=document.getElementsByTagName("SCRIPT"),p=el[el.length-1],sT,a,sep,tabRow;
do {p=p.parentNode;sT=p.innerHTML.split("MSOZoneCell_WebPart");}while (sT.length<4 && p.parentNode.id!="MSO_ContentTable")
if (p.getAttribute("contenteditable")=="true"){return;}
if (p.nodeName=="DIV"){sep=document.createElement("div");p.insertBefore(sep,p.firstChild);tabRow=document.createElement("div");p.insertBefore(tabRow,p.firstChild);}
else{sep=document.createElement("td");var sepTR=document.createElement("tr");sepTR.appendChild(sep);tabRow=document.createElement("td");var tabTR=document.createElement("tr");tabTR.appendChild(tabRow);if (p.nodeName=="TBODY"){p.insertBefore(sepTR,p.firstChild);p.insertBefore(tabTR,p.firstChild);}else if (p.nodeName=="TR"){p.parentNode.insertBefore(tabTR,p);p.parentNode.insertBefore(sepTR,p);}else {return;}}
sep.className="et-separator";tabRow.className="et-tabrow";var children=p.childNodes;p=p.parentNode;var etRoot=[],etHeader=[],etTab=[],tabsID=[];
for (var j=0;j<children.length;j++){try{var d=children[j].getElementsByTagName("td");for (i=0;i<d.length;i++) {if(d[i].id.indexOf("WebPartTitle")==0){var WPid=d[i].id.replace(/WebPartTitle/,"");if (d[i].innerHTML.indexOf("(Hidden)")==-1) {var up=d[i];while (up!=children[j]){if (up.parentNode.innerHTML.indexOf('id=WebPart'+WPid+' ')>=0||up.parentNode.innerHTML.indexOf('id="WebPart'+WPid+'" ')>=0){WPid="et"+WPid;etHeader[WPid]=up;etRoot[WPid]=children[j];etTab[WPid]=d[i].getElementsByTagName("span")[0].cloneNode(true);etTab[WPid].id=WPid;etTab[WPid].className="et-tab et-inactivetab";etTab[WPid].onclick=function(){activateTab(this);};tabRow.appendChild(etTab[WPid]);tabsID.push(WPid);break;}up=up.parentNode;}}}}}catch(e){}}
var Tabs=tabRow.getElementsByTagName("span"),TabCount=Tabs.length;
if (Split=="Yes") {var sd=document.createElement("div"),index=Math.floor(TabCount*0.5);tabRow.insertBefore(sd,Tabs[index]);}
if(AP.length && sec>0) {sec=sec*1000;interval="";a=document.createElement("span");a.innerHTML="|>";a.className="et-tab et-inactivetab";a.onclick=function(){if(interval==""){this.innerHTML="||";interval=window.setInterval(function(){Autoplay();},sec)}else{this.innerHTML="|>";window.clearInterval(interval);interval=""}};tabRow.appendChild(a);var Autoplay=function(){for(i=0;i<TabCount;i++)if(Tabs[i].className=="et-tab et-activetab"){var j=(i+1)%TabCount;activateTab(Tabs[j]);break}};if (AP=="Play"){a.innerHTML="||";interval=window.setInterval(function(){Autoplay();},sec)};}
if (Expand.length) {a=document.createElement("span");a.innerHTML=Expand;a.className="et-tab et-inactivetab";a.onclick=function(){for(i=0;i<tabsID.length;i++){etTab[tabsID[i]].className="et-tab et-inactivetab";etRoot[tabsID[i]].className=etRoot[tabsID[i]].className.replace(/et-offscreen/g,"");etRoot[tabsID[i]].style.pageBreakAfter="always";etHeader[tabsID[i]].style.display="";}};tabRow.appendChild(a);}
if (Print.length) {a=document.createElement("span");a.innerHTML=Print;a.className="et-tab et-inactivetab";a.onclick=function(){this.style.display="none";var f=document.getElementById("s4-workspace")||document.getElementsByTagName("body")[0],ed=p.parentNode.insertBefore(document.createElement(p.nodeName),p);f.appendChild(p);for (j=0;j<f.childNodes.length-1;j++) {try{f.childNodes[j].className+=" et-offscreen";}catch(e){}}a=document.createElement("span");a.innerHTML="Back to Page";a.className="et-tab et-inactivetab";a.onclick=function(){this.previousSibling.style.display="inline-block";this.parentNode.removeChild(this);ed.parentNode.insertBefore(p,ed);ed.parentNode.removeChild(ed);for (j=0;j<f.childNodes.length;j++) {try{f.childNodes[j].className=f.childNodes[j].className.replace(/\s*et-offscreen/g,"");}catch(e){}}};tabRow.appendChild(a);};tabRow.appendChild(a);}
function activateTab(t){document.cookie=tabsID.join("_")+"="+t.id+";path=/";for(i=0;i<tabsID.length;i++){etHeader[tabsID[i]].style.display=Header;if(t.id==tabsID[i]){etTab[tabsID[i]].className="et-tab et-activetab";etRoot[tabsID[i]].className=etRoot[tabsID[i]].className.replace(/\s*et-offscreen/g,"");}else{etTab[tabsID[i]].className="et-tab et-inactivetab";etRoot[tabsID[i]].className+=" et-offscreen";}}}var m=GetCookie(tabsID.join("_"))?GetCookie(tabsID.join("_")):tabsID[0];activateTab(etTab[m]);})();
</script>
You can try removing TOP: -9999px from .et-offscreen .. I'm not sure that it will solve, just a suggestion .
I have this setup at the moment. I would like it so that when you hover over a box the bottom border changes to the same colour as inside the hovered div. I am starting to think this cannot be done with just css, but how would you add javascript to do this?
Any guidance would be appreciated
http://jsfiddle.net/hCK3D/7/
Why don't you just remove the bottom-border on hover and instead make the element 1px bigger in height? (You do not need to add any JavaScript codes)
Like this:
http://jsfiddle.net/hCK3D/17/
UPDATE: Now also the border is not disrupted..
UPDATED CSS:
.item-container {
float:left;
margin-top:20px;
border-bottom: 1px #BCC0C3 solid;
height:100px;
}
.item {
float:left;
background: #ccc;
width: 100px;
height: 100px;
border-left: 1px #fff solid;
border-top: 1px #BCC0C3 solid;
border-bottom: 1px #BCC0C3 solid;
box-sizing: border-box;
}
.item:first-child {
border-left: 1px #BCC0C3 solid;
}
.item:last-child {
border-right: 1px #BCC0C3 solid;
}
.item:hover {
background:#ECEFF4;
border-left:1px #BDC0C5 solid;
border-right:1px #BDC0C5 solid;
border-bottom: 0;
height:101px;
}
.item:hover + .item {
border-left-width: 0;
}
Overlap div container border with item border on hover
Unlike the other answers posted, this solution will allow you to keep the border line on the bottom: http://jsfiddle.net/hCK3D/15/ and your white vertical lines will continue to appear correctly.
The idea is that the border from the bottom is now set in the item, and when the item is hovered the bottom border changes colour to match the hover colour. Also the container border is set for the purpose of the white vertical lines, but on hover the item hover border bottom appears in front of the container border.
See the JSFiddle for source
do you mean like this?
jsfiddle
.body{background:#ECEFF4;}
.item-container {
float:left;
border-top: 1px solid #BCC0C3;
margin-top:20px;
}
.item {
float:left;
background: #ccc;
width: 100px;
height: 100px;
border-left: 1px solid #fff ;
border-bottom: 1px solid #BCC0C3;
}
.item:first-child {border-left: 1px solid #BCC0C3;}
.item:last-child {border-right: 1px solid #BCC0C3;}
.item:hover {
background:#ECEFF4;
border-left:1px solid #BDC0C5;
border-right:1px solid #BDC0C5;
border-bottom: 1px solid #ECEFF4;
}
.item:hover + .item {border-left-width: 0;}