Can I apply css style to dreamweaver hotspot? what I mean is to change backcolor,size,font size, etc...thanks
Hotspots, at least in my experience, are just the areas you define on an image that can be clickable. In HTML they add a map element to your code, assign that map to the image, and add area elements within the map element defining the region that is clickable. (see here: http://www.entheosweb.com/website_design/image_maps.asp)
In that case, you can't do much to control that area element with CSS.
If you're talking about hyperlinks (the element), then yes you can do all of the above. For example:
a:link, a:visited {
background-color: Red;
font-size: 24pt;
}
UPDATE:
If you want an easy way to style the message that appears when you hover over a hotspot, you can use this jQuery plug-in: qtip
Related
I'm trying to edit my router-link so that the color of the text as well as the background changes when the link is active.
With the .router-link-exact-active class, I've set it so the background correctly changes from some default, but the text colour always stays the same?
Indeed, the only way to change the colour of the link's text at all (including to the non-active, default colour of blue) is by styling the tag, itself.
My code for the link is below:
<router-link :to="{path: '/Homer'}" exact tag="li"><a>Homer</a></router-link>
The CSS for the tag (which sets the colour before the link is active - it's standard colour):
a {
color:royalblue;
text-decoration: none;
}
And the CSS for the router-exact-link-active is:
.router-link-exact-active {
background: yellow;
border-radius: 5px;
color: red;
font-variant: italic;
}
So, the li's background colour (since the router-link is set to an li tag, of course) changes correctly, but the text colour remains blue no matter what.
Isn't the colour of the text (and other set styles) supposed to cascade down from the parent li's assigned active class to the tag (both when the router-link is and isn't active) - such as in this tutorial https://youtu.be/yn0_6T4HwHs?t=266?
If not, how do I style the text when it's active - I'm guessing I would attach some kind of active class to the - one that isn't a:active, since the text isn't 'active' once the mouse is done clicking on it - but I can't seem to find the right way to do that?
Apologies if this is a very basic question, but I've looked around for the answer and can't find it.
Thanks very much.
Finding the culprit
When you see an unexpected style applied, given no user/author style, the likely culprit is the user agent style sheet. You can confirm this in the DevTools computed styles pane for the inspected a element. Find the color property (the first item), expand the item to reveal the applicable styles, listed from highest priority to lowest. The highest priority style is the one that is currently applied.
To inherit color
If you want the a element to inherit its color from its parent (.router-link-exact-active in this case), apply inherit.
a {
color: inherit;
}
demo
They do cascade, but you have a default style for a tags that is more specific and as such your li style doesn’t apply.
You need to set a style that is more specific than the default one.
.router-link-exact-active a {}
should do the trick
when I do this, it works:
.view-current-sales .col-first a {color:#66ff66;}
when I add the hover, it doesn't work anymore
.view-current-sales .col-first a:hover {color:#66ff66;}
any ideas?
I think you are confusing a few things with the a tag and its accompanied hover counterpart. Let's break it down really fast using a different example.
The HTML:
<div class="nohover3">
Test 3
</div>
The CSS:
.nohover3 a {
color:#66ff66;
}
.nohover3 a:hover {
color:blue;
}
Now, I am assuming you are enclosing these a tags in some sort of div or other containing tag to have it's own separate class. Now, this HTML renders one single a tag that is accompanied by two CSS elements. The first CSS element gives the a tag its starting color, meaning it automatically starts with that lime-green color you have provided me in the original question. The second element gives the hover a different color, in this case, the color goes from that lime-green to blue.
With that being said, let's look at your example but with a bit more cleaned up code:
The HTML
<div class="nohover2">
Test 2
</div>
The CSS:
.nohover2 a {
color:#66ff66;
}
.nohover2 a:hover {
color:#66ff66;
}
In this case, both the first and second element are producing the same color for the a tags. That means the color the a tag is to begin with (lime-green) is the same as the color when you hover over the a tag(also lime-green). Which means it stays the same color whether it is hovered or not.
To paint a clearer picture here is a JsFiddle to represent what I have just said:
DEMO
I apologize ahead of time for the poor class names, creating examples is not my strong suit at the moment.
CSS uses a point-scoring system in determining which conflicting styles to use. Elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points.
Try using "Inspect Element" in your chrome browser or similar in other browser types, it will tell you if another style is scoring higher and thus its hover style is used instead.
If thats the case try replacing the class reference for a:hover to an id reference to obtain a higher score for the a:hover you wish to use.
A nice description can be found here Points in CSS specificity
If all else fails try tagging your hover style with "!important" to ensure the stype is used.
I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
I have a design for a bullet list that has two things:
a. A blue arrow image replacing the list icon
b. A very light dotted border atop and below each list item.
I'm wanting to build this into CKEditor via (CKEDITOR.stylesSet) so that the user can select this particular style of list from a dropdown and not have to write any code to do so.
I have had success to the point where I can create a list with a particular class (and now have that themed), however, am running into issues given that it seems the only way to apply both the dotted line and the blue arrow is to use multiple backgrounds via CSS3, which, SURPRISE, doesn't work in IE8 or below.
If I added some DOM pollution (I.e., surrounded the list item text in a span) I could theme that; however, it seems CKEDITOR.stylesSet only allows for setting one element per style (I.e., I can set ul as an element or li as an element, but there's no way I can use one style to set a class on the UL and surround the text of the child li elements with a span).
Or is there? I'm thinking of falling back to JavaScript for this, but I'm also open to other suggestions to accomplish what I'm doing.
Thanks!
There's no need to use background images for either the arrow or the dotted line. You can do both via CSS. All you need CKEditor to do is apply a class to the (which it sounds like you already are) and then use CSS similar to this:
.styled li {
border-top: dotted 1px black;
border-bottom: dotted 1px black;
}
.styled
{
list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}
Full working example: http://jsfiddle.net/jwynveen/ZhjCK/
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.