I have a list on my website and I would like to add a mouseenter function so that two lines appear when the mouse moves over one item and disappear when the mouse leaves. I am able to make the lines appear and disappear, but when they do they move the list items up and down, which reduces functionality and is aesthetically unappealing. I would like to make the lines appear (one above and one below the SPAN) without displacing the elements in the list.
Here is my code and a demonstration: http://jsfiddle.net/strw22fe/
script:
$(document).ready(function(){
$("SPAN").mouseenter(function() {
var line = "<hr>";
$("SPAN").eq(this.id-1).before(line);
$("SPAN").eq(this.id-1).after(line);
});
});
$(document).ready(function(){
$("SPAN").mouseleave(function() {
$("hr").remove();
});
});
Note: I have applied this function to the span because I can control its width more easily than I can the width of an li.
Best way is to do it using CSS :hover
Something like this should do fine.
Remove your JS code and insted use the following CSS code
li:hover{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li{
list-style-position: inside;
border-top: 1px solid transparent;
border-bottom:1px solid transparent;
}
Here is your updated fiddle.
I agree with Maverick, but I would expand the css so the elements don't move around and the border goes above and below the bullet point:
li:hover{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li{
list-style-position: inside;
border-top: 1px solid transparent;
border-bottom:1px solid transparent;
}
Sure enough, you should go with CSS, as suggested by Maverick.
Interesting solution the transparent borders, even if in your (simple) case I'd rather do something like this:
li{
list-style-position: inside;
}
li:hover {
border-top:1px solid;
border-bottom:1px solid;
/* just subtract the 2px added by the border-top and border-bottom from the height of the <li> */
margin:-1px 0 -1px 0;
}
re-(re-re-)updated fiddle here. ;)
There are a couple of ways to keep the span elements in place when the extra lines are added:
Initialize the page with space for the lines, so that when you add the lines you don't need extra space and don't have to move the elements.
If you are adding something like a tooltip, which isn't the case, you can make the element float above the rest of the elements so elements don't get re-sized.
Related
I am trying to create a grid system where content will be populated dynamically, so I will not know the exact amount of elements when created. What I have so far is each element is added to a flexbox container that holds 3 elements in each row. If there are more than 3 elements then the next element would go to the next row and so on. With that said what I am trying to do is add borders around each element minus the outside ones. So it would look something like this.
__|__|__
__|__|__
| |
The issue I have been having is I have been adding a bottom border and a right border to every element and then would add a border of 0 to every 3rd child using nth-child(3n). But that doesn't fix the issue with the bottom border on the bottom row and it comes out looking like this for me:
__|__|__
__|__|__
__|__|__
I am not sure the best way to target that bottom border and remove it because since the content is being populated dynamically I won't know the exact amount of elements that will be on that bottom row because it could be 1, 2, or 3 elements. So what would be the best way to get the results I am looking for? Is it possible to do this with CSS alone or will I need javascript to do this? Here is the code I am currently using:
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexElement {
width: 33.33%;
border-right: solid 2px #e1e1e1;
border-bottom: solid 2px #e1e1e1;
&:nth-child(3n), &:last-child {
border-right: none;
}
}
I recommend adding the border to the top and excluding the first three elements.
Solution
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexElement {
width: 33.33%;
border-right: solid 2px #e1e1e1;
// Styles start on the 4th child
&:nth-child(n+4) {
border-top: solid 2px #e1e1e1;
}
&:nth-child(3n), &:last-child {
border-right: none;
}
}
See JSFiddle
I have to apply a particular style on the kendo grid headers. I did come across
headerAttributes
in the kendo documentation which I tried getting to use here to make the background white and the font to the required but I am not able to remove the borders accompanying the header. Anyone can help me with an idea to get the same implemented. Including the dojo that I created to demonstrate a similar case
http://dojo.telerik.com/OXUTE
Edit: This is the kind of end result I am looking for
Thanks in advance
This is not pretty...because of the borders all belonging to different elements and the top-right grey corner needing to be gone, but this works:
.k-grid-header-wrap {
border: 0;
}
.k-grid-header {
padding-right: 0px !important;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #fff;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #fff;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #fff;
margin-left: -1px;
margin-top: -1px;
margin-right: -1px;
}
http://dojo.telerik.com/#Stephen/ErORO
It adds a border to the header that is the same colour as the background and then sets the margins to -1px so that the border is on top of the grid's border. Otherwise, you have to figure out how to remove just the portion of the grid's left/right border on the top row without removing it from the rest of the grid.
It also forces the right padding to 0 to get rid of the grey block.
It works...but I feel dirty.
Update...I was thinking about it some more
Instead of hacking the borders off the header row, another way would be to completely hide the header and "replace" it with a label styled however you want, i.e.:
.k-grid-header
{
height: 0;
border-bottom-width: 0;
display: none;
overflow: hidden;
}
http://dojo.telerik.com/#Stephen/UWoZU
I am using materializecss framework for my website. I am using a scrollspy function for the navigation bar. But I want to change the default color of red to white and change from vertical line to a horizontal line underneath nav links.
Now I have this
What I want is
JS code for scrollspy function.
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I don't know which specific classes to change.
If you don't want to use a side table of contents on your website, you can change the css for the table-of-contents class.
Go to the materialize.css file, and find the following code:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-left: 2px solid #ea4a4f;
}
Then you can replace it with this:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-bottom: 2px solid white;
}
To see the results, you have to link the materialize.css file instead of materialize.min.css in your html. In a production environment, you will need to minimize the modified materialize.css file.
Maybe it's a little late, but I hope it will help.
of-content class, you can add css like this
nav ul li a.active {
border-bottom: 1px solid #333;
}
means, when element a is active, it will give border-bottom
How do you get a nice outline? This is similar to the question:
CSS/Javascript: How to draw minimal border around an inline element?
However, the accepted solution to that question results in jagged textboxes, as seen here:
http://jsfiddle.net/z9THQ/2/
/* p {
text-align: justify;
} */
.wrapped {
outline: 2px solid black;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
Even with justified text, the right edge is still jagged; it should look like a single line, like in the image below.
A pure CSS solution would be ideal, but if Javascript is necessary, that would be fine too.
A related symptom which a solution would ideally solve is the fact that the :hover attribute is not activated by the region in between two lines of text. Ideally, the whole section should feel like a text-area, only it is non-rectangular since it is inline with other text.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a shape which consists of 3 components:
* ***************************** *
*** * * ***
***** * * *****
******* ***************************** *******
As shown in the diagram above, the shape consists of a rectangle surrounded by two triangles (one on the left side and one on the right).
I would like the entire shape to change to the same colour whenever the user hovers over any one of its components.
I've tried using various methods to accomplish this task but without much success.
Here's what I currently have on JSFiddle.
The shape is kind of off, however my main concern is how to get the hover feature working for my object.
Even though I tried implementing JavaScript in the fiddle above, I will accept any other alternative methods that will get my code working.
I've done it like here:
<div class="container">
... your code
</div>
.container:hover .tabStyle{
background : #000;
border-color: #000;
}
.container:hover .slopeLeft, .container:hover .slopeRight{
border-bottom-color: #000;
}
where .container is parent element for your div's
JSFiddle: http://jsfiddle.net/svzrkdu6/12/
It is achievable using pure CSS. Modify your code line:
/* Just for an example */
.child {
height: 20px;
border: 1px solid black;
}
/* Your solution */
.parent:hover .child {
background-color: red;
}
<div class="parent">
<div class="child first">A</div>
<div class="child second">B</div>
<div class="child third">C</div>
</div>
First off, your JSFiddle was not displaying the .slopeRight, I added the following html:
.slopeRight {
border-bottom: 100px solid #D8D8D8;
border-right: 50px solid transparent;
position: absolute;
top: 10px;
left: 255px;
}
I then surrounded all the rectangle components under one div called .wrap, and added the following css:
.wrap:hover .tabStyle {
backGround: red;
border-color: red;
}
.wrap:hover .slopeLeft {
border-color: transparent red red transparent ;
}
.wrap:hover .slopeRight {
border-bottom: 100px solid red;
border-right: 50px solid transparent;
}
Here's a working fiddle...http://jsfiddle.net/svzrkdu6/10/
Moreover, are you sure you want 3 components to your shape? Because if not, you may create a trapezoid instead, which is much more concise...check out this fiddle
http://jsfiddle.net/383rksx6/1/