ApplyTo

Description: The applyTo option property applies its value to the <identifier>.

Edit
ctr('.test', {
width: 200px
hover: {
on: {
option: {
applyTo: '.on-applyTo'
}
opacity: 1
}
non: {
option: {
applyTo: '.non-applyTo'
}
opacity: 0.5
}
}
})
.test:
width: 200px
hover:
on:
option:
applyTo: .on-applyTo
opacity: 1
non:
option:
applyTo: .non-applyTo
opacity: 0.5
.test {
width: 200px;
}
.test:hover .on-applyTo {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) .non-applyTo {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      option: {
        applyTo: '.on-applyTo'
      }
      opacity: 1
    }
    non: {
      option: {
        applyTo: '.non-applyTo'
      }
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
}
.test:hover .on-applyTo {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) .non-applyTo {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover:
    on:
      option:
        applyTo: .on-applyTo
      opacity: 1
    non:
      option:
        applyTo: .non-applyTo
      opacity: 0.5

Notes

AppendTo

Description: The appendTo option property appends its value to the <identifier>.

Edit
ctr('.test', {
width: 200px
hover: {
on: {
option: {
appendTo: '.on-appendTo'
}
opacity: 1
}
non: {
option: {
appendTo: '.non-appendTo'
}
opacity: 0.5
}
}
})
.test:
width: 200px
hover:
on:
option:
appendTo: .on-appendTo
opacity: 1
non:
option:
appendTo: .non-appendTo
opacity: 0.5
.test {
width: 200px;
}
.test:hover.on-appendTo {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover).non-appendTo {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      option: {
        appendTo: '.on-appendTo'
      }
      opacity: 1
    }
    non: {
      option: {
        appendTo: '.non-appendTo'
      }
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
}
.test:hover.on-appendTo {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover).non-appendTo {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover:
    on:
      option:
        appendTo: .on-appendTo
      opacity: 1
    non:
      option:
        appendTo: .non-appendTo
      opacity: 0.5

Notes

Override

Description: The override option property overrides the entirety of the selector, including the <identifier>, with its value.

Edit
ctr('.test', {
width: 200px
hover: {
on: {
option: {
override: '#override:hover'
}
opacity: 1
}
non: {
option: {
override: '#override:not(:hover)'
}
opacity: 0.5
}
}
})
.test:
width: 200px
hover:
on:
option:
override: '#override:hover'
opacity: 1
non:
option:
override: '#override:not(:hover)'
opacity: 0.5
.test {
width: 200px;
}
#override:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
#override:not(:hover) {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      option: {
        override: '#override:hover'
      }
      opacity: 1
    }
    non: {
      option: {
        override: '#override:not(:hover)'
      }
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
}
#override:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
#override:not(:hover) {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover:
    on:
      option:
        override: '#override:hover'
      opacity: 1
    non:
      option:
        override: '#override:not(:hover)'
      opacity: 0.5

Notes